(100) npx lerna exec prettier

npx lerna exec prettier --stream -- --write src/** test/** --config C:\code\fluidframework\prettier.config.js --ignore-path c:\code\FluidFramework\.prettierignore

components/examples/badge/src/Badge.tsx

@@ -17,15 +17,17 @@ import { IBadgeType } from "./IBadgeType";
 import { BadgeView } from "./BadgeView";
 import { IHistory } from "./IHistory";
 
-export class Badge extends PrimedComponent implements
-    IComponentHTMLView,
-    IComponentReactViewable {
+export class Badge extends PrimedComponent implements IComponentHTMLView, IComponentReactViewable {
     currentCell: SharedCell;
     optionsMap: SharedMap;
     historySequence: SharedObjectSequence<IHistory<IBadgeType>>;
 
-    public get IComponentHTMLView() { return this; }
-    public get IComponentReactViewable() { return this; }
+    public get IComponentHTMLView() {
+        return this;
+    }
+    public get IComponentReactViewable() {
+        return this;
+    }
 
     private readonly currentId: string = "value";
     private readonly historyId: string = "history";
@@ -93,10 +95,12 @@ export class Badge extends PrimedComponent implements
 
         // Create a sequence to store the badge's history
         const history = SharedObjectSequence.create<IHistory<IBadgeType>>(this.runtime);
-        history.insert(0, [{
-            value: current.get(),
-            timestamp: new Date(),
-        }]);
+        history.insert(0, [
+            {
+                value: current.get(),
+                timestamp: new Date(),
+            },
+        ]);
         this.root.set(this.historyId, history.handle);
     }
 
@@ -109,14 +113,13 @@ export class Badge extends PrimedComponent implements
     protected async componentHasInitialized() {
         this.currentCell = await this.root.get<IComponentHandle<SharedCell>>(this.currentId).get();
         this.optionsMap = await this.root.get<IComponentHandle<SharedMap>>(this.optionsId).get();
-        this.historySequence = await this.root.get<IComponentHandle<SharedObjectSequence<IHistory<IBadgeType>>>>(this.historyId).get();
+        this.historySequence = await this.root
+            .get<IComponentHandle<SharedObjectSequence<IHistory<IBadgeType>>>>(this.historyId)
+            .get();
     }
 
     public render(div: HTMLElement) {
-        ReactDOM.render(
-            this.createJSXElement(),
-            div,
-        );
+        ReactDOM.render(this.createJSXElement(), div);
     }
 
     public remove() {
@@ -133,7 +136,8 @@ export class Badge extends PrimedComponent implements
                 <BadgeView
                     currentCell={this.currentCell}
                     optionsMap={this.optionsMap}
-                    historySequence={this.historySequence} />
+                    historySequence={this.historySequence}
+                />
             </div>
         );
     }

components/examples/badge/src/BadgeInstantiationFactory.ts

@@ -14,10 +14,6 @@ const BadgeName = "@fluid-example/badge";
 export const BadgeInstantiationFactory = new PrimedComponentFactory(
     BadgeName,
     Badge,
-    [
-        SharedMap.getFactory(),
-        SharedCell.getFactory(),
-        SharedObjectSequence.getFactory(),
-    ],
+    [SharedMap.getFactory(), SharedCell.getFactory(), SharedObjectSequence.getFactory()],
     {},
 );

components/examples/badge/src/BadgeView.tsx

@@ -78,8 +78,7 @@ export class BadgeView extends React.Component<IBadgeViewProps, IBadgeViewState>
     private _onClick(_, item: IContextualMenuItem): void {
         if (item.key === "new") {
             this.setState({ isDialogVisible: true });
-        }
-        else {
+        } else {
             this._setCurrent(item as IBadgeType);
         }
     }
@@ -116,10 +115,12 @@ export class BadgeView extends React.Component<IBadgeViewProps, IBadgeViewState>
         if (newItem.key !== this.state.current.key) {
             // Save current value into history
             const len = this.props.historySequence.getItemCount();
-            this.props.historySequence.insert(len, [{
-                value: newItem,
-                timestamp: new Date(),
-            }]);
+            this.props.historySequence.insert(len, [
+                {
+                    value: newItem,
+                    timestamp: new Date(),
+                },
+            ]);
 
             // Set new value
             this.props.currentCell.set(newItem);
@@ -160,8 +161,7 @@ export class BadgeView extends React.Component<IBadgeViewProps, IBadgeViewState>
 
     private _getTextColor(c: IColor) {
         // https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
-        return (c.r * 0.299 + c.g * 0.587 + c.b * 0.114 > 186) ?
-            "#000000" : "#ffffff";
+        return c.r * 0.299 + c.g * 0.587 + c.b * 0.114 > 186 ? "#000000" : "#ffffff";
     }
 
     private _onRenderCard(): JSX.Element {
@@ -174,14 +174,17 @@ export class BadgeView extends React.Component<IBadgeViewProps, IBadgeViewState>
                     activityDescription={`Set to ${x.value.text}`}
                     // eslint-disable-next-line @typescript-eslint/no-use-before-define
                     timeStamp={getRelativeDate(x.timestamp)}
-                    activityIcon={<Icon {...x.value.iconProps} />} />,
+                    activityIcon={<Icon {...x.value.iconProps} />}
+                />,
             );
         });
 
         return (
-            <div style={{
-                padding: this.cardPadding,
-            }}>
+            <div
+                style={{
+                    padding: this.cardPadding,
+                }}
+            >
                 {history}
             </div>
         );
@@ -270,9 +273,7 @@ export class BadgeView extends React.Component<IBadgeViewProps, IBadgeViewState>
                     }}
                 >
                     <Stack>
-                        <TextField
-                            placeholder="Custom status name"
-                            onChange={this._updateText} />
+                        <TextField placeholder="Custom status name" onChange={this._updateText} />
                         <ColorPicker
                             color={this.state.customColor}
                             onChange={this._updateColor}
@@ -291,7 +292,7 @@ export class BadgeView extends React.Component<IBadgeViewProps, IBadgeViewState>
 
 function getRelativeDate(timestamp: Date): string {
     // https://stackoverflow.com/questions/7641791/javascript-library-for-human-friendly-relative-date-formatting
-    const delta = Math.round(((new Date()).getTime() - new Date(timestamp).getTime()) / 1000);
+    const delta = Math.round((new Date().getTime() - new Date(timestamp).getTime()) / 1000);
 
     const minute = 60;
     const hour = minute * 60;
@@ -302,11 +303,11 @@ function getRelativeDate(timestamp: Date): string {
     } else if (delta < 3 * minute) {
         return "a few minutes ago";
     } else if (delta < hour) {
-        return `${Math.floor(delta / minute)  } minutes ago`;
+        return `${Math.floor(delta / minute)} minutes ago`;
     } else if (Math.floor(delta / hour) < 3) {
         return "a few hours ago.";
     } else if (delta < day) {
-        return `${Math.floor(delta / hour)  } hours ago`;
+        return `${Math.floor(delta / hour)} hours ago`;
     } else if (delta < day * 2) {
         return "yesterday";
     } else {

components/examples/clicker/src/agent.ts

@@ -3,15 +3,24 @@
  * Licensed under the MIT License.
  */
 
-import { IComponentRouter, IComponentRunnable, IRequest, IResponse } from "@fluidframework/component-core-interfaces";
+import {
+    IComponentRouter,
+    IComponentRunnable,
+    IRequest,
+    IResponse,
+} from "@fluidframework/component-core-interfaces";
 import { Counter } from "@fluidframework/map";
 
 // Sample agent to run.
 export class ClickerAgent implements IComponentRouter, IComponentRunnable {
-    constructor(private readonly counter: Counter) { }
+    constructor(private readonly counter: Counter) {}
 
-    public get IComponentRouter() { return this; }
-    public get IComponentRunnable() { return this; }
+    public get IComponentRouter() {
+        return this;
+    }
+    public get IComponentRunnable() {
+        return this;
+    }
 
     public async run() {
         this.counter.on("incremented", (incrementValue: number, currentValue: number) => {

components/examples/clicker/src/index.tsx

@@ -19,7 +19,9 @@ export const ClickerName = pkg.name as string;
  * Basic Clicker example using new interfaces and stock component classes.
  */
 export class Clicker extends PrimedComponent implements IComponentHTMLView {
-    public get IComponentHTMLView() { return this; }
+    public get IComponentHTMLView() {
+        return this;
+    }
 
     /**
      * Do setup work here
@@ -42,12 +44,9 @@ export class Clicker extends PrimedComponent implements IComponentHTMLView {
      * Will return a new Clicker view
      */
     public render(div: HTMLElement) {
-    // Get our counter object that we set in initialize and pass it in to the view.
+        // Get our counter object that we set in initialize and pass it in to the view.
         const counter = this.root.get("clicks");
-        ReactDOM.render(
-            <CounterReactView counter={counter} />,
-            div,
-        );
+        ReactDOM.render(<CounterReactView counter={counter} />, div);
         return div;
     }
 
@@ -60,11 +59,14 @@ export class Clicker extends PrimedComponent implements IComponentHTMLView {
             instance: new ClickerAgent(counter),
         };
         this.taskManager.register(agentTask);
-        this.taskManager.pick(this.url, "agent", true).then(() => {
-            console.log(`Picked`);
-        }, (err) => {
-            console.log(err);
-        });
+        this.taskManager.pick(this.url, "agent", true).then(
+            () => {
+                console.log(`Picked`);
+            },
+            (err) => {
+                console.log(err);
+            },
+        );
     }
 }
 
@@ -99,19 +101,20 @@ class CounterReactView extends React.Component<CounterProps, CounterState> {
                 <span className="clicker-value-class" id={`clicker-value-${Date.now().toString()}`}>
                     {this.state.value}
                 </span>
-                <button onClick={() => { this.props.counter.increment(1); }}>+</button>
+                <button
+                    onClick={() => {
+                        this.props.counter.increment(1);
+                    }}
+                >
+                    +
+                </button>
             </div>
         );
     }
 }
 
 // ----- FACTORY SETUP -----
 
-export const ClickerInstantiationFactory = new PrimedComponentFactory(
-    ClickerName,
-    Clicker,
-    [],
-    {},
-);
+export const ClickerInstantiationFactory = new PrimedComponentFactory(ClickerName, Clicker, [], {});
 
 export const fluidExport = ClickerInstantiationFactory;

components/examples/collaborative-textarea/src/index.tsx

@@ -20,20 +20,24 @@ export class CollaborativeText extends PrimedComponent implements IComponentHTML
 
     private text: SharedString | undefined;
 
-    public get IComponentHTMLView() { return this; }
+    public get IComponentHTMLView() {
+        return this;
+    }
 
-    public static get ComponentName() { return "@fluid-example/collaborative-textarea"; }
+    public static get ComponentName() {
+        return "@fluid-example/collaborative-textarea";
+    }
 
     private static readonly factory = new PrimedComponentFactory(
         CollaborativeText.ComponentName,
         CollaborativeText,
-        [
-            SharedString.getFactory(),
-        ],
+        [SharedString.getFactory()],
         {},
     );
 
-    public static getFactory() { return this.factory; }
+    public static getFactory() {
+        return this.factory;
+    }
 
     protected async componentInitializingFirstTime() {
         // Create the SharedString and store the handle in our root SharedDirectory
@@ -56,7 +60,7 @@ export class CollaborativeText extends PrimedComponent implements IComponentHTML
 
         ReactDOM.render(
             <div className="text-area">
-                <CollaborativeTextArea sharedString={this.text}/>
+                <CollaborativeTextArea sharedString={this.text} />
             </div>,
             div,
         );

components/examples/dice-roller/src/index.ts

@@ -3,9 +3,7 @@
  * Licensed under the MIT License.
  */
 
-import {
-    ContainerRuntimeFactoryWithDefaultComponent,
-} from "@fluidframework/aqueduct";
+import { ContainerRuntimeFactoryWithDefaultComponent } from "@fluidframework/aqueduct";
 
 import { DiceRoller, DiceRollerInstantiationFactory } from "./main";
 
@@ -24,7 +22,5 @@ export { DiceRoller, DiceRollerInstantiationFactory } from "./main";
  */
 export const fluidExport = new ContainerRuntimeFactoryWithDefaultComponent(
     DiceRoller.ComponentName,
-    new Map([
-        [DiceRoller.ComponentName, Promise.resolve(DiceRollerInstantiationFactory)],
-    ]),
+    new Map([[DiceRoller.ComponentName, Promise.resolve(DiceRollerInstantiationFactory)]]),
 );

components/examples/dice-roller/src/main.tsx

@@ -5,10 +5,7 @@
 
 import { EventEmitter } from "events";
 
-import {
-    PrimedComponent,
-    PrimedComponentFactory,
-} from "@fluidframework/aqueduct";
+import { PrimedComponent, PrimedComponentFactory } from "@fluidframework/aqueduct";
 import { IValueChanged } from "@fluidframework/map";
 import { IComponentHTMLView } from "@fluidframework/view-interfaces";
 
@@ -55,7 +52,7 @@ const DiceRollerView: React.FC<IDiceRollerViewProps> = (props: IDiceRollerViewPr
     }, [props.model]);
 
     // Unicode 0x2680-0x2685 are the sides of a dice (⚀⚁⚂⚃⚄⚅)
-    const diceChar = String.fromCodePoint(0x267F + diceValue);
+    const diceChar = String.fromCodePoint(0x267f + diceValue);
 
     return (
         <div>
@@ -69,9 +66,13 @@ const DiceRollerView: React.FC<IDiceRollerViewProps> = (props: IDiceRollerViewPr
  * The DiceRoller is our implementation of the IDiceRoller interface.
  */
 export class DiceRoller extends PrimedComponent implements IDiceRoller, IComponentHTMLView {
-    public static get ComponentName() { return "@fluid-example/dice-roller"; }
+    public static get ComponentName() {
+        return "@fluid-example/dice-roller";
+    }
 
-    public get IComponentHTMLView() { return this; }
+    public get IComponentHTMLView() {
+        return this;
+    }
 
     /**
      * ComponentInitializingFirstTime is called only once, it is executed only by the first client to open the
@@ -95,10 +96,7 @@ export class DiceRoller extends PrimedComponent implements IDiceRoller, ICompone
      * Render the dice.
      */
     public render(div: HTMLElement) {
-        ReactDOM.render(
-            <DiceRollerView model={ this } />,
-            div,
-        );
+        ReactDOM.render(<DiceRollerView model={this} />, div);
     }
 
     public get value() {