prettier formatting

Author: Ben Grynhaus

.prettierrc

@@ -1,4 +1,5 @@
 {
   "singleQuote": true,
-  "printWidth": 120
-}
+  "printWidth": 120,
+  "trailingComma": "es5"
+}

libs/core/package-lock.json

@@ -3,4 +3,4 @@ export * from './src/components/wrapper-component';
 export { ReactContent } from './src/renderer/react-content';
 export { registerElement } from './src/renderer/registry';
 export { passProp, getPassProps, PassProp } from './src/renderer/pass-prop-decorator';
-export * from './src/renderer/components/Disguise'
+export * from './src/renderer/components/Disguise';

libs/core/public-api.ts

@@ -1,7 +1,20 @@
-import { AfterViewInit, ComponentFactoryResolver, ComponentRef, ElementRef, Injector, TemplateRef, Type, ChangeDetectorRef, OnChanges, SimpleChanges, HostBinding, Input } from "@angular/core";
-import { isReactNode } from "../renderer/react-node";
-import { renderComponent, renderFunc, renderTemplate } from "../renderer/renderprop-helpers";
-import { unreachable } from "../utils/types/unreachable";
+import {
+  AfterViewInit,
+  ComponentFactoryResolver,
+  ComponentRef,
+  ElementRef,
+  Injector,
+  TemplateRef,
+  Type,
+  ChangeDetectorRef,
+  OnChanges,
+  SimpleChanges,
+  HostBinding,
+  Input
+} from '@angular/core';
+import { isReactNode } from '../renderer/react-node';
+import { renderComponent, renderFunc, renderTemplate } from '../renderer/renderprop-helpers';
+import { unreachable } from '../utils/types/unreachable';
 import toStyle from 'css-to-style';
 
 type PropMapper = (value: any) => [string, any];
@@ -14,9 +27,7 @@ const forbiddenAttributesAsProps: ReadonlyArray<AttributeNameAlternative> = [
   ['style', 'rStyle'],
 ];
 
-const ignoredAttributeMatchers = [
-  /^_?ng-?.*/
-];
+const ignoredAttributeMatchers = [/^_?ng-?.*/];
 
 const ngClassRegExp = /^ng-/;
 
@@ -27,7 +38,7 @@ export interface RenderComponentOptions<TContext extends object> {
 }
 
 export type InputRendererOptions<TContext extends object> =
-  TemplateRef<TContext>
+  | TemplateRef<TContext>
   | ((context: TContext) => HTMLElement)
   | ComponentRef<TContext>
   | RenderComponentOptions<TContext>;
@@ -40,17 +51,18 @@ 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 {
-
   protected abstract reactNodeRef: ElementRef;
 
-  @Input() set rClass(value: string) {
+  @Input()
+  set rClass(value: string) {
     if (isReactNode(this.reactNodeRef.nativeElement)) {
       this.reactNodeRef.nativeElement.setProperty('className', value);
       this.changeDetectorRef.detectChanges();
     }
   }
 
-  @Input() set rStyle(value: string) {
+  @Input()
+  set rStyle(value: string) {
     if (isReactNode(this.reactNodeRef.nativeElement)) {
       this.reactNodeRef.nativeElement.setProperty('style', toStyle(value));
       this.changeDetectorRef.detectChanges();
@@ -62,7 +74,11 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
    * @param elementRef The host element.
    * @param setHostDisplay Whether the host's `display` should be set to the root child node's `display`. defaults to `false`
    */
-  constructor(public readonly elementRef: ElementRef, private readonly changeDetectorRef: ChangeDetectorRef, private readonly setHostDisplay: boolean = false) { }
+  constructor(
+    public readonly elementRef: ElementRef,
+    private readonly changeDetectorRef: ChangeDetectorRef,
+    private readonly setHostDisplay: boolean = false
+  ) { }
 
   ngAfterViewInit() {
     this._passAttributesAsProps();
@@ -90,7 +106,9 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
    * Create an JSX renderer for an `@Input` property.
    * @param input The input property
    */
-  protected createInputJsxRenderer<TContext extends object>(input: InputRendererOptions<TContext>): JsxRenderFunc<TContext> | undefined {
+  protected createInputJsxRenderer<TContext extends object>(
+    input: InputRendererOptions<TContext>
+  ): JsxRenderFunc<TContext> | undefined {
     if (input === undefined) {
       return undefined;
     }
@@ -107,7 +125,7 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
       return (context: TContext) => renderFunc(input, context);
     }
 
-    if (typeof input === "object") {
+    if (typeof input === 'object') {
       const { componentType, factoryResolver, injector } = input;
       const componentFactory = factoryResolver.resolveComponentFactory(componentType);
       const componentRef = componentFactory.create(injector);
@@ -123,7 +141,10 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
    * @param renderInputValue the value of the render `@Input` property.
    * @param jsxRenderer an optional renderer to use.
    */
-  protected createRenderPropHandler<TProps extends object>(renderInputValue: InputRendererOptions<TProps>, jsxRenderer?: JsxRenderFunc<TProps>): (props?: TProps, defaultRender?: JsxRenderFunc<TProps>) => JSX.Element | null {
+  protected createRenderPropHandler<TProps extends object>(
+    renderInputValue: InputRendererOptions<TProps>,
+    jsxRenderer?: JsxRenderFunc<TProps>
+  ): (props?: TProps, defaultRender?: JsxRenderFunc<TProps>) => JSX.Element | null {
     const renderer = jsxRenderer || this.createInputJsxRenderer(renderInputValue);
 
     return (props?: TProps, defaultRender?: JsxRenderFunc<TProps>) => {
@@ -136,9 +157,7 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
   }
 
   private _passAttributesAsProps() {
-    const hostAttributes = Array.from(
-      (this.elementRef.nativeElement as HTMLElement).attributes
-    );
+    const hostAttributes = Array.from((this.elementRef.nativeElement as HTMLElement).attributes);
 
     if (!this.reactNodeRef || !isReactNode(this.reactNodeRef.nativeElement)) {
       throw new Error('reactNodeRef must hold a reference to a ReactNode');
@@ -148,15 +167,23 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
     hostAttributes.forEach(attr => {
       const [forbidden, alternativeAttrName] = this._isForbiddenAttribute(attr);
       if (forbidden) {
-        throw new Error(`[${(this.elementRef.nativeElement as HTMLElement).tagName.toLowerCase()}] React wrapper components cannot have the '${attr.name}' attribute set. Use the following alternative: ${alternativeAttrName || ''}`);
+        throw new Error(
+          `[${(this.elementRef
+            .nativeElement as HTMLElement).tagName.toLowerCase()}] React wrapper components cannot have the '${
+          attr.name
+          }' attribute set. Use the following alternative: ${alternativeAttrName || ''}`
+        );
       }
     });
 
     const whitelistedHostAttributes = hostAttributes.filter(attr => !this._isIgnoredAttribute(attr));
-    const props = whitelistedHostAttributes.reduce((acc, attr) => ({
-      ...acc,
-      [attr.name]: attr.value,
-    }), {});
+    const props = whitelistedHostAttributes.reduce(
+      (acc, attr) => ({
+        ...acc,
+        [attr.name]: attr.value,
+      }),
+      {}
+    );
 
     this.reactNodeRef.nativeElement.setProperties(props);
   }

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

@@ -3,7 +3,7 @@ const clearUndefinedProperties = <T extends object>(obj: T): Partial<T> => {
     const _acc = acc;
     if (obj[key] !== undefined) _acc[key] = obj[key];
     return _acc;
-  }, {})
-}
+  }, {});
+};
 
 export default clearUndefinedProperties;

libs/core/src/utils/object/remove-undefined-properties.ts

@@ -62,7 +62,7 @@
   ],
   "private": false,
   "peerDependencies": {
-    "@angular-react/core": "^0.2.0",
+    "@angular-react/core": "^0.2.1",
     "@angular/common": "^5.2.7",
     "@angular/core": "^5.2.7",
     "@angular/platform-browser-dynamic": "^5.2.7",

libs/fabric/package-lock.json

@@ -1,5 +1,13 @@
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+  ViewChild,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { IBreadcrumbItem, IBreadcrumbProps } from 'office-ui-fabric-react/lib/Breadcrumb';
 
 @Component({
@@ -24,7 +32,7 @@ import { IBreadcrumbItem, IBreadcrumbProps } from 'office-ui-fabric-react/lib/Br
     </Breadcrumb>
   `,
   styles: ['react-renderer'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabBreadcrumbComponent extends ReactWrapperComponent<IBreadcrumbProps> implements OnInit {
   @ViewChild('reactNode') protected reactNodeRef: ElementRef;

libs/fabric/package.json

@@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Breadcrumb } from 'office-ui-fabric-react/lib/Breadcrumb';
 import { FabBreadcrumbComponent } from './breadcrumb.component';
 
-const components = [
-  FabBreadcrumbComponent,
-];
+const components = [FabBreadcrumbComponent];
 
 @NgModule({
   imports: [CommonModule],
   declarations: components,
   exports: components,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabBreadcrumbModule {
-
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('Breadcrumb', () => Breadcrumb);
   }
-
 }

libs/fabric/src/components/breadcrumb/breadcrumb.component.ts

@@ -51,11 +51,9 @@ import { FabBaseButtonComponent } from './base-button.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabActionButtonComponent extends FabBaseButtonComponent {
-
   @ViewChild('reactNode') reactNodeRef: ElementRef;
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
     super(elementRef, changeDetectorRef);
   }
-
 }