Package upgrades, Prettier alignment (#38)

- Package upgrades (non-breaking)
- Align repo to Prettier 1.15.3
  - [includes] Revert decorators to their previous position in components, before the change in 1.14.

Author: bengry

CODE_OF_CONDUCT.md

@@ -1,3 +1,3 @@
 This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
 For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
-contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
+contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.

CONTRIBUTING.md

@@ -14,6 +14,7 @@ For more information see the [Code of Conduct FAQ](https://opensource.microsoft.
 or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
 
 ## Pull Requests Reviews
+
 This is a simple guide to assist in reviewing Github pull requests locally within VS Code.
 
 See: https://gist.github.com/piscisaureus/3342247
@@ -66,4 +67,4 @@ Fast-forward
 ...
 ```
 
-Note: "git pull" did not work for me by itself for the PR branch...  Perhaps "git pull origin".
+Note: "git pull" did not work for me by itself for the PR branch... Perhaps "git pull origin".

README.md

@@ -2,11 +2,12 @@
 
 [![npm version](https://badge.fury.io/js/%40angular-react%2Fcore.svg)](https://www.npmjs.com/package/@angular-react/core)
 
-Industry trends, organizational pressures, and other factors can lead to mandates regarding the use of component libraries or migration from one technology to another.  In the case of [Office UI Fabric][fab], where its use is required, the client must be written in React (there is no Angular component library for the latest version).  Rewrite from Angular to React may be cost-prohibitive or ill advised for other reasons.  
+Industry trends, organizational pressures, and other factors can lead to mandates regarding the use of component libraries or migration from one technology to another. In the case of [Office UI Fabric][fab], where its use is required, the client must be written in React (there is no Angular component library for the latest version). Rewrite from Angular to React may be cost-prohibitive or ill advised for other reasons.
 
-Use of Angular-React allows consuming any React elements, but specifically Office UI Fabric, within an Angular [2+] application.  The library of wrappers for Office UI Fabric simplifies the use of these components with Angular.  However, any React code can make use of the custom Angular-React renderer.
+Use of Angular-React allows consuming any React elements, but specifically Office UI Fabric, within an Angular [2+] application. The library of wrappers for Office UI Fabric simplifies the use of these components with Angular. However, any React code can make use of the custom Angular-React renderer.
 
 ### Quick links
+
 [@angular-react/fabric](https://www.npmjs.com/package/@angular-react/fabric) |
 [Documentation, quick start, and guides][ard] |
 [Demo][ard-demo] |
@@ -15,15 +16,18 @@ Use of Angular-React allows consuming any React elements, but specifically Offic
 [Office UI Fabric](https://developer.microsoft.com/en-us/fabric)
 
 ### Typical Use Cases
+
 - Use React component libraries with Angular
 - Incrementally rewrite an Angular application into React (moving from atomic/leaf nodes upward into full features/pages until the entire app is re-written)
 
 ## Libraries
+
 - [**core**][lib-core]: Includes the Renderer and supporting logic to render Angular components with React implementations as React components.
 - [**fabric**][lib-fab]: The light-weight Angular component wrappers that expose the Fabric React component api through common Angular components (including both imperative AND declrative syntax in many cases).
 
 # Roadmap
-Initial work to prove the feasibility of adapting the Angular Renderer to output React managed components has concluded.  We have moved beyond the initial simple Fabric components and expanded coverage to much of the available [Office UI Fabric][fab-c] component library.
+
+Initial work to prove the feasibility of adapting the Angular Renderer to output React managed components has concluded. We have moved beyond the initial simple Fabric components and expanded coverage to much of the available [Office UI Fabric][fab-c] component library.
 
 In the coming months we will continue to refine the component implementations as we use the angular-react core and fabric libraries in 2 real-world consumer facing production applications.
 
@@ -41,4 +45,4 @@ You can look through the issues (which should be up-to-date on who is working on
 [fab]: https://developer.microsoft.com/en-us/fabric
 [fab-c]: https://developer.microsoft.com/en-us/fabric#/components
 [lib-core]: https://www.npmjs.com/package/@angular-react/core
-[lib-fab]: https://www.npmjs.com/package/@angular-react/fabric
+[lib-fab]: https://www.npmjs.com/package/@angular-react/fabric

apps/demo/karma.conf.js

@@ -1,8 +1,7 @@
-
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 
-module.exports = function (config) {
+module.exports = function(config) {
   config.set({
     basePath: '',
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
@@ -11,23 +10,22 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma'),
     ],
     client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
       dir: require('path').join(__dirname, '../../coverage'),
       reports: ['html', 'lcovonly'],
-      fixWebpackSourcePaths: true
+      fixWebpackSourcePaths: true,
     },
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
     browsers: ['Chrome'],
-    singleRun: false
+    singleRun: false,
   });
 };
-    

apps/demo/src/404.html

@@ -1,27 +1,19 @@
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
 
-<head>
-  <meta charset="utf-8" />
+    <title>Angular-React Demo</title>
 
-  <title>Angular-React Demo</title>
+    <script>
+      // Store the URL the user was trying to access when receiving the 404.
+      sessionStorage.redirect = location.href;
+    </script>
 
-  <script>
-    // Store the URL the user was trying to access when receiving the 404.
-    sessionStorage.redirect = location.href;
-  </script>
-
-  <!-- Immediately redirect to the base URL so we can use the SPA routing. -->
-  <meta http-equiv="refresh" content="0;URL='https://microsoft.github.io/angular-react/demo/'"></meta>
-</head>
-
-<body>
-<!-- IE required at least 512 bytes of data to show non-default 404. -->
-
-
-
-</body>
-
-
-</body>
+    <!-- Immediately redirect to the base URL so we can use the SPA routing. -->
+    <meta http-equiv="refresh" content="0;URL='https://microsoft.github.io/angular-react/demo/'" />
+  </head>
 
+  <body>
+    <!-- IE required at least 512 bytes of data to show non-default 404. -->
+  </body>
 </html>

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

@@ -117,24 +117,56 @@ <h2>Getting up and running...</h2>
   <fab-calendar [strings]="strings" (onSelectDate)="onSelectDate($event)"></fab-calendar>
 
   <fab-marquee-selection [isEnabled]="marqueeEnabled" [selection]="selection">
-    <fab-details-list [selection]="selection" [items]="detailItems" (onColumnHeaderClick)="onColumnHeaderClicked($event)">
+    <fab-details-list
+      [selection]="selection"
+      [items]="detailItems"
+      (onColumnHeaderClick)="onColumnHeaderClicked($event)"
+    >
       <columns>
-        <fab-details-list-column key="column-1" [minWidth]="150" name="Column #1" fieldName="field1" [isResizable]="true">
+        <fab-details-list-column
+          key="column-1"
+          [minWidth]="150"
+          name="Column #1"
+          fieldName="field1"
+          [isResizable]="true"
+        >
         </fab-details-list-column>
-        <fab-details-list-column key="column-2" [minWidth]="150" name="Column #2" fieldName="field2" [isResizable]="true">
+        <fab-details-list-column
+          key="column-2"
+          [minWidth]="150"
+          name="Column #2"
+          fieldName="field2"
+          [isResizable]="true"
+        >
         </fab-details-list-column>
-        <fab-details-list-column key="column-3" [minWidth]="150" name="Custom Column" fieldName="field3" [isResizable]="true">
+        <fab-details-list-column
+          key="column-3"
+          [minWidth]="150"
+          name="Custom Column"
+          fieldName="field3"
+          [isResizable]="true"
+        >
           <render>
-            <ng-template let-index="index">
-              Custom content for index {{ index }}
-            </ng-template>
+            <ng-template let-index="index"> Custom content for index {{ index }} </ng-template>
           </render>
         </fab-details-list-column>
       </columns>
       <groups>
         <fab-group-item key="group-1" name="Group #1" [count]="3" [startIndex]="0">
-          <fab-group-item [level]="1" key="group-1-1" name="Nested Group #1.1" [count]="1" [startIndex]="0"></fab-group-item>
-          <fab-group-item [level]="1" key="group-1-2" name="Nested Group #1.2" [count]="2" [startIndex]="1"></fab-group-item>
+          <fab-group-item
+            [level]="1"
+            key="group-1-1"
+            name="Nested Group #1.1"
+            [count]="1"
+            [startIndex]="0"
+          ></fab-group-item>
+          <fab-group-item
+            [level]="1"
+            key="group-1-2"
+            name="Nested Group #1.2"
+            [count]="2"
+            [startIndex]="1"
+          ></fab-group-item>
         </fab-group-item>
         <fab-group-item key="group-2" name="Group #2" [count]="1" [startIndex]="3"></fab-group-item>
         <fab-group-item key="group-3" name="Group #3" [count]="1" [startIndex]="4"></fab-group-item>

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

@@ -8,8 +8,10 @@ import { ICalendarStrings, IContextualMenuProps, ISelection, Selection } from 'o
   encapsulation: ViewEncapsulation.None,
 })
 export class AppComponent {
-  @ViewChild('customRange')
-  customRangeTemplate: TemplateRef<{ item: any; dismissMenu: (ev?: any, dismissAll?: boolean) => void }>;
+  @ViewChild('customRange') customRangeTemplate: TemplateRef<{
+    item: any;
+    dismissMenu: (ev?: any, dismissAll?: boolean) => void;
+  }>;
 
   onClickEventHandler(ev) {
     console.log('onClick', { ev });

apps/demo/src/app/app.module.ts

@@ -72,7 +72,7 @@ import { CounterComponent } from './counter/counter.component';
     FabCalendarModule,
     FabDetailsListModule,
     FabGroupModule,
-    FabMarqueeSelectionModule
+    FabMarqueeSelectionModule,
   ],
   declarations: [AppComponent, CounterComponent],
   bootstrap: [AppComponent],

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

@@ -4,7 +4,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/
   selector: 'counter',
   template: `
     <fab-default-button [text]="count + '+'" (onClick)="onClick()"></fab-default-button>
-    `,
+  `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CounterComponent {

apps/demo/src/index.html

@@ -1,14 +1,14 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Angular-React Demo</title>
-  <base href="/">
+  <head>
+    <meta charset="utf-8" />
+    <title>Angular-React Demo</title>
+    <base href="/" />
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>