Revert "Allow wrapping any React component with an Angular one on-the-fly" (#111)

Reverts #106

Issues with AOT builds including this, reverting until resolved.

Author: bengry

apps/demo/src/app/app.component.html

@@ -9,11 +9,6 @@ <h2>Getting up and running...</h2>
   </ol>
 </div>
 
-<h5>Generic React component wrapper</h5>
-<my-counter [count]="count" (onIncrement)="reactCustomOnIncrement($event)">
-  <div style="text-transform: uppercase;color:red">test</div>
-</my-counter>
-
 <fab-checkbox label="foo" [renderLabel]="renderCheckboxLabel"></fab-checkbox>
 
 <div style="width:500px">

apps/demo/src/app/app.component.ts

@@ -178,12 +178,6 @@ export class AppComponent {
     this.onDecrement = this.onDecrement.bind(this);
   }
 
-  count = 3;
-
-  reactCustomOnIncrement(newCount: number) {
-    this.count = newCount;
-  }
-
   customItemCount = 1;
 
   // FIXME: Allow declarative syntax too

apps/demo/src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { AngularReactBrowserModule, wrapComponent } from '@angular-react/core';
+import { AngularReactBrowserModule } from '@angular-react/core';
 import {
   FabBreadcrumbModule,
   FabButtonModule,
@@ -35,18 +35,11 @@ import {
   FabSpinButtonModule,
   FabTextFieldModule,
 } from '@angular-react/fabric';
-import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { NxModule } from '@nrwl/nx';
 import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
 import { AppComponent } from './app.component';
 import { CounterComponent } from './counter/counter.component';
-import { CounterProps, Counter } from './counter/react-counter';
-
-const MyCounterComponent = wrapComponent<CounterProps>({
-  ReactComponent: Counter,
-  selector: 'my-counter',
-  // propNames: ['count', 'onIncrement'], // needed if propTypes are not defined on `ReactComponent`
-});
 
 @NgModule({
   imports: [
@@ -87,9 +80,8 @@ const MyCounterComponent = wrapComponent<CounterProps>({
     FabSpinButtonModule,
     FabTextFieldModule,
   ],
-  declarations: [AppComponent, CounterComponent, MyCounterComponent],
+  declarations: [AppComponent, CounterComponent],
   bootstrap: [AppComponent],
-  schemas: [NO_ERRORS_SCHEMA],
 })
 export class AppModule {
   constructor() {

apps/demo/src/app/counter/react-counter.tsx

@@ -2,8 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc/apps/demo",
-    "module": "es2015",
-    "jsx": "react"
+    "module": "es2015"
   },
   "include": ["**/*.ts"],
   "exclude": ["**/*.spec.ts", "src/test.ts"]

apps/demo/tsconfig.app.json

@@ -12,7 +12,6 @@ import {
   Renderer2,
   SimpleChanges,
   AfterContentInit,
-  ɵBaseDef,
 } from '@angular/core';
 import classnames from 'classnames';
 import toStyle from 'css-to-style';
@@ -22,10 +21,9 @@ import { Many } from '../declarations/many';
 import { ReactContentProps } from '../renderer/react-content';
 import { isReactNode } from '../renderer/react-node';
 import { isReactRendererData } from '../renderer/renderer';
-import { fromPairs } from '../utils/object/from-pairs';
+import { toObject } from '../utils/object/to-object';
 import { afterRenderFinished } from '../utils/render/render-delay';
 import { InputRendererOptions, JsxRenderFunc, createInputJsxRenderer, createRenderPropHandler } from './render-props';
-import { omit } from '../utils/object/omit';
 
 // Forbidden attributes are still ignored, since they may be set from the wrapper components themselves (forbidden is only applied for users of the wrapper components)
 const ignoredAttributeMatchers = [/^_?ng-?.*/, /^style$/, /^class$/];
@@ -233,23 +231,17 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterC
     );
 
     const eventListeners = this.elementRef.nativeElement.getEventListeners();
-    // Event listeners already being handled natively by the derived component
-    const handledEventListeners = Object.keys(
-      ((this.constructor as any).ngBaseDef as ɵBaseDef<any>).outputs
-    ) as (keyof typeof eventListeners)[];
-    const unhandledEventListeners = omit(eventListeners, ...handledEventListeners);
-
     const eventHandlersProps =
-      unhandledEventListeners && Object.keys(unhandledEventListeners).length
-        ? fromPairs(
-            Object.values(unhandledEventListeners).map<[string, React.EventHandler<React.SyntheticEvent>]>(
-              ([eventListener]) => [
-                eventListener.type,
-                (ev: React.SyntheticEvent) => eventListener.listener(ev && ev.nativeEvent),
-              ]
-            )
+      eventListeners && Object.keys(eventListeners).length
+        ? toObject(
+            Object.values(eventListeners).map<[string, React.EventHandler<React.SyntheticEvent>]>(([eventListener]) => [
+              eventListener.type,
+              (ev: React.SyntheticEvent) => eventListener.listener(ev && ev.nativeEvent),
+            ])
           )
         : {};
+    {
+    }
 
     this.reactNodeRef.nativeElement.setProperties({ ...props, ...eventHandlersProps });
   }

libs/core/src/lib/components/generic-wrap-component.ts

@@ -1,6 +1,3 @@
-// Copyright (c) Microsoft Corporation. All rights reserved.
-// Licensed under the MIT License.
-
 // prettier-ignore
 /**
  * Get the known keys (i.e. no index signature) of T.

libs/core/src/lib/components/wrapper-component.ts

@@ -1,4 +1 @@
-// Copyright (c) Microsoft Corporation. All rights reserved.
-// Licensed under the MIT License.
-
 export type Many<T> = T | T[];

libs/core/src/lib/declarations/known-keys.ts

@@ -1,7 +1,7 @@
 /**
  * Transforms an array of [key, value] tuples to an object
  */
-export function fromPairs<T extends [PropertyKey, any][]>(pairs: T): object {
+export function toObject<T extends [string, any][]>(pairs: T): object {
   return pairs.reduce(
     (acc, [key, value]) =>
       Object.assign(acc, {

libs/core/src/lib/declarations/many.ts

@@ -3,15 +3,12 @@
 
 export { AngularReactBrowserModule } from './lib/angular-react-browser.module';
 export * from './lib/components/wrapper-component';
-export * from './lib/components/generic-wrap-component';
 export * from './lib/declarations/public-api';
 export * from './lib/renderer/components/Disguise';
 export { getPassProps, passProp, PassProp } from './lib/renderer/pass-prop-decorator';
 export { createReactContentElement, ReactContent, ReactContentProps } from './lib/renderer/react-content';
 export * from './lib/renderer/react-template';
-export { registerElement, ComponentResolver } from './lib/renderer/registry';
-
-export * from './lib/utils/object/omit';
+export { registerElement } from './lib/renderer/registry';
 export {
   JsxRenderFunc,
   RenderComponentOptions,

libs/core/src/lib/utils/object/from-pairs.ts renamed to libs/core/src/lib/utils/object/to-object.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent, omit } from '@angular-react/core';
+import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
 import {
   ChangeDetectorRef,
   ElementRef,
@@ -23,6 +23,7 @@ import { IContextualMenuItem } from 'office-ui-fabric-react';
 import { Subscription } from 'rxjs';
 import { CommandBarItemChangedPayload } from '../command-bar/directives/command-bar-item.directives';
 import { mergeItemChanges } from '../core/declarative/item-changed';
+import { omit } from '../../utils/omit';
 import { getDataAttributes } from '../../utils/get-data-attributes';
 
 export abstract class FabBaseButtonComponent extends ReactWrapperComponent<IButtonProps>

libs/core/src/public-api.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { InputRendererOptions, KnownKeys, ReactWrapperComponent, omit } from '@angular-react/core';
+import { InputRendererOptions, KnownKeys, ReactWrapperComponent } from '@angular-react/core';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -22,6 +22,7 @@ import { ICommandBarItemProps, ICommandBarProps } from 'office-ui-fabric-react/l
 import { IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu';
 import { Subscription } from 'rxjs';
 import { OnChanges, TypedChanges } from '../../declarations/angular/typed-changes';
+import omit from '../../utils/omit';
 import { mergeItemChanges } from '../core/declarative/item-changed';
 import { CommandBarItemChangedPayload, CommandBarItemDirective } from './directives/command-bar-item.directives';
 import {

libs/fabric/src/lib/components/button/base-button.component.ts

@@ -18,7 +18,7 @@ import {
   Renderer2,
   ViewChild,
 } from '@angular/core';
-import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent, omit } from '@angular-react/core';
+import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
 import {
   DetailsListBase,
   IColumn,
@@ -32,6 +32,7 @@ import { IListProps } from 'office-ui-fabric-react/lib/List';
 import { Subscription } from 'rxjs';
 
 import { OnChanges, TypedChanges } from '../../declarations/angular/typed-changes';
+import { omit } from '../../utils/omit';
 import { mergeItemChanges } from '../core/declarative/item-changed';
 import { ChangeableItemsDirective } from '../core/shared/changeable-items.directive';
 import { IDetailsListColumnOptions } from './directives/details-list-column.directive';

libs/fabric/src/lib/components/command-bar/command-bar.component.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { InputRendererOptions, Omit, ReactWrapperComponent, omit } from '@angular-react/core';
+import { InputRendererOptions, Omit, ReactWrapperComponent } from '@angular-react/core';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -15,6 +15,7 @@ import {
   ViewChild,
 } from '@angular/core';
 import { IExpandingCardProps, IHoverCardProps, IPlainCardProps } from 'office-ui-fabric-react/lib/HoverCard';
+import { omit } from '../../utils/omit';
 
 @Component({
   selector: 'fab-hover-card',