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

Author: Ben Grynhaus

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

@@ -9,6 +9,11 @@ <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-dropdown
   [label]="'test label'"
   [selectedKey]="selectedItem && selectedItem.key"
@@ -19,7 +24,12 @@ <h2>Getting up and running...</h2>
   (onBlur)="logEvent('dropdown blur', $event)"
 ></fab-dropdown>
 
-<fab-dropdown contentStyle="width: 300px;" [placeholder]="'Select one'" [defaultSelectedKey]="'A'" (onChange)="logEvent('dropdown change', $event)">
+<fab-dropdown
+  contentStyle="width: 300px;"
+  [placeholder]="'Select one'"
+  [defaultSelectedKey]="'A'"
+  (onChange)="logEvent('dropdown change', $event)"
+>
   <options>
     <fab-dropdown-option optionKey="A" text="See option A"></fab-dropdown-option>
     <fab-dropdown-option optionKey="B" text="See option B"></fab-dropdown-option>

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

@@ -169,6 +169,12 @@ 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 } from '@angular-react/core';
+import { AngularReactBrowserModule, WrapComponent } from '@angular-react/core';
 import {
   FabBreadcrumbModule,
   FabButtonModule,
@@ -35,11 +35,18 @@ import {
   FabSpinButtonModule,
   FabTextFieldModule,
 } from '@angular-react/fabric';
-import { NgModule } from '@angular/core';
+import { NgModule, NO_ERRORS_SCHEMA } 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 { Counter } from './react-counter';
+
+const MyCounterComponent = WrapComponent({
+  ReactComponent: Counter,
+  selector: 'my-counter',
+  // propNames: ['count', 'onIncrement'], // needed if propTypes are not defined on `ReactComponent`
+});
 
 @NgModule({
   imports: [
@@ -80,8 +87,9 @@ import { CounterComponent } from './counter/counter.component';
     FabSpinButtonModule,
     FabTextFieldModule,
   ],
-  declarations: [AppComponent, CounterComponent],
+  declarations: [AppComponent, CounterComponent, MyCounterComponent],
   bootstrap: [AppComponent],
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class AppModule {
   constructor() {

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

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

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

@@ -0,0 +1,131 @@
+// 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

@@ -17,6 +17,7 @@ import {
   TemplateRef,
   Type,
   AfterContentInit,
+  ɵBaseDef,
 } from '@angular/core';
 import classnames from 'classnames';
 import toStyle from 'css-to-style';
@@ -26,9 +27,10 @@ import { ReactContentProps } from '../renderer/react-content';
 import { isReactNode } from '../renderer/react-node';
 import { isReactRendererData } from '../renderer/renderer';
 import { createComponentRenderer, createHtmlRenderer, createTemplateRenderer } from '../renderer/renderprop-helpers';
-import { toObject } from '../utils/object/to-object';
+import { fromPairs } from '../utils/object/from-pairs';
 import { afterRenderFinished } from '../utils/render/render-delay';
 import { unreachable } from '../utils/types/unreachable';
+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$/];
@@ -284,17 +286,23 @@ 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 =
-      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),
-            ])
+      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),
+              ]
+            )
           )
         : {};
-    {
-    }
 
     this.reactNodeRef.nativeElement.setProperties({ ...props, ...eventHandlersProps });
   }

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

@@ -1,3 +1,6 @@
+// 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 +1,4 @@
+// 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 renamed to libs/core/src/lib/utils/object/from-pairs.ts

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