merge from master

Author: Ben Grynhaus

apps/docs/src/app/containers/component-docs/fabric/fabric.component.html

@@ -13,7 +13,7 @@ <h2>Dialog</h2>
 <fab-dialog [hidden]="dialogHidden" (onDismiss)="toggleDialog()" title="Fabric [React] Dialog" subText="Use Fabric React components inside your Angular app!">
   {{ sampleContent2 }} {{ sampleContent3 }}
   <fab-dialog-footer>
-    <fab-default-button (onClick)="clickSave()" text='Save' style="margin-right:10px;"></fab-default-button>
+    <fab-default-button (onClick)="clickSave()" text='Save' contentStyle="margin-right: 10px;"></fab-default-button>
     <fab-default-button (onClick)="toggleDialog()" text='Cancel'></fab-default-button>
   </fab-dialog-footer>
 </fab-dialog>

libs/core/package.json

@@ -1,16 +1,18 @@
 {
   "$schema": "../../node_modules/ng-packagr/package.schema.json",
   "name": "@angular-react/core",
-  "version": "0.3.0-alpha1",
+  "version": "0.3.0-alpha3",
   "ngPackage": {
+    "deleteDestPath": true,
+    "whitelistedNonPeerDependencies": [
+      "tslib",
+      "css-to-style"
+    ],
     "lib": {
       "languageLevel": [
         "dom",
         "es2017"
       ],
-      "embedded": [
-        "css-to-style"
-      ],
       "entryFile": "public-api.ts",
       "umdModuleIds": {
         "react": "React",
@@ -52,5 +54,11 @@
     "@angular/platform-browser": "^6.1.0",
     "react-dom": "^16.4.1",
     "react": "^16.4.1"
-  }
+  },
+  "dependencies": {
+    "css-to-style": "^1.2.0"
+  },
+  "bundledDependencies": [
+    "css-to-style"
+  ]
 }

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

@@ -1,32 +1,22 @@
 import {
   AfterViewInit,
+  ChangeDetectorRef,
   ComponentFactoryResolver,
   ComponentRef,
   ElementRef,
   Injector,
-  TemplateRef,
-  Type,
-  ChangeDetectorRef,
+  Input,
   OnChanges,
   SimpleChanges,
-  HostBinding,
-  Input,
+  TemplateRef,
+  Type,
 } from '@angular/core';
 import toStyle from 'css-to-style';
-
+import { ReactContentProps } from '../renderer/react-content';
 import { isReactNode } from '../renderer/react-node';
 import { renderComponent, renderFunc, renderTemplate } from '../renderer/renderprop-helpers';
-import { ExternalReactContentProps } from '../renderer/react-content';
 import { unreachable } from '../utils/types/unreachable';
 
-type AttributeNameAlternative = [string, string | undefined];
-
-const forbiddenAttributesAsProps: ReadonlyArray<AttributeNameAlternative> = [
-  ['key', null],
-  ['class', 'rClass'],
-  ['style', 'rStyle'],
-];
-
 // 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$/];
 
@@ -52,47 +42,47 @@ export type JsxRenderFunc<TContext> = (context: TContext) => JSX.Element;
  */
 // NOTE: TProps is not used at the moment, but a preparation for a potential future change.
 export abstract class ReactWrapperComponent<TProps extends {}> implements AfterViewInit, OnChanges {
-  private _rClass: string;
-  private _rStyle: string;
+  private _contentClass: string;
+  private _contentStyle: string;
 
-  protected abstract reactNodeRef: ElementRef;
+  protected abstract reactNodeRef: ElementRef<HTMLElement>;
 
   /**
    * Alternative to `class` using the same syntax.
    *
    * @description Since this is a wrapper component, sticking to the virtual DOM concept, this should have any styling of its own.
-   * Any value passes to `rClass` will be passed to the root component's class.
+   * Any value passes to `contentClass` will be passed to the root component's class.
    */
   @Input()
-  set rClass(value: string) {
-    this._rClass = value;
+  set contentClass(value: string) {
+    this._contentClass = value;
     if (isReactNode(this.reactNodeRef.nativeElement)) {
       this.reactNodeRef.nativeElement.setProperty('className', value);
       this.changeDetectorRef.detectChanges();
     }
   }
 
-  get rClass(): string {
-    return this._rClass;
+  get contentClass(): string {
+    return this._contentClass;
   }
 
   /**
    * Alternative to `style` using the same syntax.
    *
    * @description Since this is a wrapper component, sticking to the virtual DOM concept, this should have any styling of its own.
-   * Any value passes to `rStyle` will be passed to the root component's style.
+   * Any value passes to `contentStyle` will be passed to the root component's style.
    */
   @Input()
-  set rStyle(value: string) {
-    this._rStyle = value;
+  set contentStyle(value: string) {
+    this._contentStyle = value;
     if (isReactNode(this.reactNodeRef.nativeElement)) {
       this.reactNodeRef.nativeElement.setProperty('style', toStyle(value));
       this.changeDetectorRef.detectChanges();
     }
   }
 
-  get rStyle(): string {
-    return this._rStyle;
+  get contentStyle(): string {
+    return this._contentStyle;
   }
 
   /**
@@ -138,7 +128,7 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
    */
   protected createInputJsxRenderer<TContext extends object>(
     input: InputRendererOptions<TContext>,
-    additionalProps?: ExternalReactContentProps
+    additionalProps?: ReactContentProps
   ): JsxRenderFunc<TContext> | undefined {
     if (input === undefined) {
       return undefined;
@@ -176,7 +166,7 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
   protected createRenderPropHandler<TProps extends object>(
     renderInputValue: InputRendererOptions<TProps>,
     jsxRenderer?: JsxRenderFunc<TProps>,
-    additionalProps?: ExternalReactContentProps
+    additionalProps?: ReactContentProps
   ): (props?: TProps, defaultRender?: JsxRenderFunc<TProps>) => JSX.Element | null {
     const renderer = jsxRenderer || this.createInputJsxRenderer(renderInputValue, additionalProps);
 
@@ -241,12 +231,13 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
     const { name, value } = attr;
 
     if (name === 'key') return [true, undefined];
-    if (name === 'class' && value.split(' ').some(className => !ngClassRegExp.test(className))) return [true, 'rClass'];
+    if (name === 'class' && value.split(' ').some(className => !ngClassRegExp.test(className)))
+      return [true, 'contentClass'];
     if (name === 'style') {
       const style = toStyle(value);
       // Only allowing style if it's something that changes the display - setting anything else should be done on the child component directly (via the `styles` attribute in fabric for example)
       if (Object.entries(style).filter(([key, value]) => value && key !== 'display').length > 0) {
-        return [true, 'rStyle'];
+        return [true, 'contentStyle'];
       }
     }
 

libs/core/src/lib/declarations/StringMap.d.ts

@@ -0,0 +1 @@
+export type StringMap<T = any> = { [index: string]: T };

…bs/fabric/src/lib/declarations/omit.d.ts libs/core/src/lib/declarations/omit.d.tslibs/fabric/src/lib/declarations/omit.d.ts renamed to libs/core/src/lib/declarations/omit.d.ts libs/fabric/src/lib/declarations/omit.d.ts renamed to libs/core/src/lib/declarations/omit.d.ts

@@ -0,0 +1,2 @@
+export * from './omit';
+export * from './StringMap';

libs/core/src/lib/declarations/public-api.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-
 import { ReactWrapperComponent } from '../../components/wrapper-component';
-import { passPropsSymbol, getPassProps, PassProp } from '../../renderer/pass-prop-decorator';
-import { ReactContent } from '../react-content';
+import { getPassProps } from '../../renderer/pass-prop-decorator';
 import removeUndefinedProperties from '../../utils/object/remove-undefined-properties';
+import { ReactContent } from '../react-content';
 
 /**
  * Props for `Disguise` component.

libs/core/src/lib/renderer/components/Disguise.ts

@@ -1,13 +1,21 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { Omit } from '../declarations/omit';
 
 const DEBUG = false;
-export const CHILDREN_TO_APPEND_PROP = Symbol('children-to-append');
+export const CHILDREN_TO_APPEND_PROP = 'children-to-append';
 
 /**
  * Props that can be passed to `ReactContent` from users.
  */
-export interface ExternalReactContentProps {
+export type ReactContentProps = Omit<AllReactContentProps, typeof CHILDREN_TO_APPEND_PROP>;
+
+/**
+ * @internal
+ */
+export interface AllReactContentProps {
+  readonly [CHILDREN_TO_APPEND_PROP]: HTMLElement[];
+
   /**
    * Experimental rendering mode.
    * Uses a similar approach to `router-outlet`, where the child elements are added to the parent, instead of this node, and this is hidden.
@@ -16,20 +24,14 @@ export interface ExternalReactContentProps {
   legacyRenderMode?: boolean;
 }
 
-// NOTE: Separated into `ExternalReactContentProps` since We only want a subset of props to be exposed to external users.
-// With Omit type (TS 2.8) we can simply have `type ExternalReactContentProps = Omit<ReactContentProps, 'children-to-append'>`
-export interface ReactContentProps extends ExternalReactContentProps {
-    readonly [CHILDREN_TO_APPEND_PROP]: HTMLElement[];
-}
-
 /**
  * Render any `HTMLElement`s (including Angular components) as a child of React components.
  * Supports two rendering modes:
  *  1. `legacy` - append `<react-content>` as the root, and nest the `children-to-append` underneath it.
  *  2. `new` (**default**) - append the `children-to-append` to the parent of this component, and hide the `<react-content>` element.
  *     (similar to how `router-outlet` behaves in Angular).
  */
-export class ReactContent extends React.PureComponent<ReactContentProps> {
+export class ReactContent extends React.PureComponent<AllReactContentProps> {
   componentDidMount() {
     const element = ReactDOM.findDOMNode(this);
     if (this.props[CHILDREN_TO_APPEND_PROP]) {

libs/core/src/lib/renderer/react-content.ts

@@ -1,8 +1,6 @@
-/// <reference path="../types/StringMap.d.ts" />
-
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-
+import { StringMap } from '../declarations/StringMap';
 import removeUndefinedProperties from '../utils/object/remove-undefined-properties';
 import { CHILDREN_TO_APPEND_PROP } from './react-content';
 import { getComponentClass } from './registry';
@@ -202,13 +200,10 @@ export class ReactNode {
     return React.createElement(this.type, clearedProps, children.length > 0 ? children : undefined);
   }
 
-  private transformProps(props: object) {
+  private transformProps<TProps extends object>(props: TProps) {
     return Object.entries(props).reduce((acc, [key, value]) => {
-      const [transformKey, transformValue] = this.transformProp(key, value);
-      return {
-        ...acc,
-        [transformKey]: transformValue,
-      };
+      const [newKey, newValue] = typeof key !== 'string' ? [key, value] : this.transformProp(key, value);
+      return Object.assign(acc, { [newKey]: newValue });
     }, {});
   }
 

libs/core/src/lib/renderer/react-node.ts

@@ -1,7 +1,7 @@
 import { Injectable, Renderer2, RendererStyleFlags2, RendererType2 } from '@angular/core';
 import { EventManager, ɵDomRendererFactory2, ɵDomSharedStylesHost } from '@angular/platform-browser';
 import * as ReactDOM from 'react-dom';
-
+import { StringMap } from '../declarations/StringMap';
 import { isReactNode, ReactNode } from './react-node';
 
 const DEBUG = false;