Allow wrapping any React component with an Angular one on-the-fly

[bengry]

Addresses #103.

ToDo

• AOT builds fail when using this, need to find an approach that doesn't break them. See Revert "Allow wrapping any React component with an Angular one on-the-fly" #111.

---

I've open for suggestions on the API etc. to see if there are things that can be improved. The main idea is the keep the Angular-React philosophy as much as possible, while simplifying the wrapping of React components.

Notes

Using this is completely optional (no breaking API changes), at the cost of:

1. AOT does not work for components wrapped in this way (obviously).
2. You must use NO_ERRORS_SCHEMA in the NgModule that plans to consume these components. Since these are created at runtime, the Angular compiler can't validate them.
3. This has only been tested on the basic use-cases of Inputs and Outputs, I haven't tested render props, and I expect them to not work at this time. A future PR could improve upon this.

Usage

call wrapComponent on any React component:

const MyCounterComponent = wrapComponent<CounterProps>({
  ReactComponent: Counter, // <-- type of the component to wrap
  selector: 'my-counter', // <-- selector to use later in the app
  // propNames: ['count', 'onIncrement'], // only needed if propTypes are not defined on `ReactComponent`
});

3. Add schemas: [NO_ERRORS_SCHEMA] (see notes above for the why).
4. Use as usual with any other Angular-React wrapper component:

<my-counter [count]="count" (onIncrement)="reactCustomOnIncrement($event)">
  <div style="text-transform: uppercase; color:red">test</div>
</my-counter>

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.