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

Reverts Microsoft/angular-react#106

Issues with AOT builds including this, reverting until resolved.

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

@@ -9,11 +9,6 @@
   </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

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-
-export interface CounterProps {
-  count?: number;
-  onIncrement?: (count: number) => void;
-}
-
-export const Counter: React.FC<CounterProps> = ({ count = 0, onIncrement, children, ...rest } = {}) => {
-  return (
-    <button {...rest} onClick={() => onIncrement(count + 1)}>
-      <div>
-        <h5>children:</h5>
-        {children}
-      </div>
-      <div>
-        <h5>count:</h5>
-        {count}
-      </div>
-    </button>
-  );
-};
-
-Counter.propTypes = {
-  count: PropTypes.number,
-  onIncrement: PropTypes.func,
-};

apps/demo/tsconfig.app.json

@@ -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"]

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

@@ -1,131 +0,0 @@
-// Copyright (c) Microsoft Corporation. All rights reserved.
-// Licensed under the MIT License.
-
-import * as React from 'react';
-import {
-  Component,
-  ElementRef,
-  ViewChild,
-  ChangeDetectionStrategy,
-  Input,
-  ChangeDetectorRef,
-  Renderer2,
-  NgZone,
-  Output,
-  EventEmitter,
-  Type,
-} from '@angular/core';
-
-declare const __decorate: typeof import('tslib').__decorate;
-
-import { ReactWrapperComponent } from './wrapper-component';
-import { registerElement } from '../renderer/registry';
-
-export interface WrapComponentOptions<TProps extends object> {
-  /**
-   * The type of the component to wrap.
-   */
-  ReactComponent: React.ComponentType<TProps>;
-
-  /**
-   * The selector to use.
-   */
-  selector: string;
-
-  /**
-   * The prop names to pass to the `reactComponent`, if any.
-   * Note that any prop starting with `on` will be converted to an `Output`, and other to `Input`s.
-   *
-   * @note If `reactComponent` has `propTypes`, this can be omitted.
-   */
-  propNames?: string[];
-
-  /**
-   * @see `WrapperComponentOptions#setHostDisplay`.
-   */
-  setHostDisplay?: boolean;
-
-  /**
-   * An _optional_ callback for specified wether a prop should be considered an `Output`.
-   * @default propName => propName.startsWith('on')
-   */
-  isOutputProp?: (propName: string) => boolean;
-}
-
-/**
- * Gets the display name of a component.
- * @param WrappedComponent The type of the wrapper component
- */
-function getDisplayName<TProps extends object>(WrappedComponent: React.ComponentType<TProps>): string {
-  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
-}
-
-/**
- * Checks if the propName is an output one.
- * Currently uses a simple check - anything that starts with `on` is considered an output prop.
- */
-function defaultIsOutputProp(propName: string): boolean {
-  return propName.startsWith('on');
-}
-
-function getPropNames<TProps extends object>(ReactComponent: React.ComponentType<TProps>) {
-  if (!ReactComponent.propTypes) {
-    return null;
-  }
-
-  return Object.keys(ReactComponent.propTypes);
-}
-
-/**
- * Wrap a React component with an Angular one.
- *
- * @template TProps The type of props of the underlying React element.
- * @param options Options for wrapping the component.
- * @returns A class of a wrapper Angular component.
- */
-export function wrapComponent<TProps extends object>(
-  options: Readonly<WrapComponentOptions<TProps>>
-): Type<ReactWrapperComponent<TProps>> {
-  const Tag = getDisplayName(options.ReactComponent);
-  registerElement(Tag, () => options.ReactComponent);
-
-  const propNames = options.propNames || getPropNames(options.ReactComponent);
-  const isOutputProp = options.isOutputProp || defaultIsOutputProp;
-
-  const inputProps = propNames.filter(propName => !isOutputProp(propName));
-  const outputProps = propNames.filter(isOutputProp);
-
-  const inputPropsBindings = inputProps.map(propName => `[${propName}]="${propName}"`);
-  const outputPropsBindings = outputProps.map(propName => `(${propName})="${propName}.emit($event)"`);
-  const propsBindings = [...inputPropsBindings, ...outputPropsBindings].join('\n');
-
-  @Component({
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    styles: ['react-renderer'],
-    selector: options.selector,
-    template: `
-      <${Tag}
-        #reactNode
-        ${propsBindings}
-      >
-        <ReactContent><ng-content></ng-content></ReactContent>
-      </${Tag}>
-    `,
-  })
-  class WrapperComponent extends ReactWrapperComponent<TProps> {
-    @ViewChild('reactNode') protected reactNodeRef: ElementRef;
-
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
-      super(elementRef, changeDetectorRef, renderer, { ngZone, setHostDisplay: options.setHostDisplay });
-
-      outputProps.forEach(propName => {
-        this[propName] = new EventEmitter<any>();
-      });
-    }
-  }
-
-  inputProps.forEach(propName => __decorate([Input()], WrapperComponent.prototype, propName));
-  outputProps.forEach(propName => __decorate([Output()], WrapperComponent.prototype, propName));
-
-  return WrapperComponent;
-}

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

@@ -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/declarations/known-keys.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/declarations/many.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/utils/object/to-object.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/public-api.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/fabric/src/lib/components/button/base-button.component.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/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, 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/details-list/details-list.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/hover-card/hover-card.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',

libs/fabric/src/lib/components/pickers/base-picker/base-picker.component.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { InputRendererOptions, JsxRenderFunc, Omit, ReactWrapperComponent, omit } from '@angular-react/core';
+import { InputRendererOptions, JsxRenderFunc, Omit, ReactWrapperComponent } from '@angular-react/core';
 import { ChangeDetectorRef, ElementRef, EventEmitter, Input, NgZone, OnInit, Output, Renderer2 } from '@angular/core';
 import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
 import {
@@ -10,6 +10,7 @@ import {
   IBasePickerSuggestionsProps,
   IPickerItemProps,
 } from 'office-ui-fabric-react/lib/Pickers';
+import omit from '../../../utils/omit';
 
 export abstract class FabBasePickerComponent<T, TProps extends IBasePickerProps<T>>
   extends ReactWrapperComponent<TProps>
@@ -18,7 +19,7 @@ export abstract class FabBasePickerComponent<T, TProps extends IBasePickerProps<
   @Input() resolveDelay?: IBasePickerProps<T>['resolveDelay'];
   @Input() defaultSelectedItems?: IBasePickerProps<T>['defaultSelectedItems'];
   @Input() getTextFromItem?: IBasePickerProps<T>['getTextFromItem'];
-  @Input() className?: IBasePickerProps<T>['className'];
+  @Input() className?: IBasePickerProps<T>['className']; 
   @Input() pickerCalloutProps?: IBasePickerProps<T>['pickerCalloutProps'];
   @Input() searchingText?: IBasePickerProps<T>['searchingText'];
   @Input() disabled?: IBasePickerProps<T>['disabled'];

libs/fabric/src/lib/components/search-box/search-box.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,
@@ -16,6 +16,7 @@ import {
 } from '@angular/core';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { ISearchBoxProps } from 'office-ui-fabric-react/lib/SearchBox';
+import omit from '../../utils/omit';
 
 @Component({
   selector: 'fab-search-box',

libs/fabric/src/lib/components/tooltip/tooltip-host.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 { ITooltipHostProps, ITooltipProps } from 'office-ui-fabric-react/lib/Tooltip';
+import { omit } from '../../utils/omit';
 
 @Component({
   selector: 'fab-tooltip-host',

libs/fabric/src/lib/utils/omit.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { Omit } from '../../declarations/omit';
+import { Omit } from '@angular-react/core';
 
 /**
  * Omit a a set of properties from an object.