[Blazor] Add more eslint rules and apply auto fixes (#9004)

Author: javiercn

src/Components/Browser.JS/src/.eslintrc.js

@@ -33,7 +33,37 @@ module.exports = {
     }],
     "comma-style": ["error", "last"],
     "comma-spacing": ["error", { "after": true }],
-    "no-trailing-spaces": ["error"]
+    "no-trailing-spaces": ["error"],
+    "curly": ["error"],
+    "dot-location": ["error", "property"],
+    "eqeqeq": ["error", "always"],
+    "no-eq-null": ["error"],
+    "no-multi-spaces": ["error"],
+    "no-unused-labels": ["error"],
+    "require-await": ["error"],
+    "array-bracket-newline": ["error", { "multiline": true, "minItems": 4 }],
+    "array-bracket-spacing": ["error", "never"],
+    "array-element-newline": ["error", { "minItems": 3 }],
+    "block-spacing": ["error"],
+    "func-call-spacing": ["error", "never"],
+    "function-paren-newline": ["error", "multiline"],
+    "key-spacing": ["error", { "mode": "strict" }],
+    "keyword-spacing": ["error", { "before": true }],
+    "lines-between-class-members": ["error", "always"],
+    "new-parens": ["error"],
+    "no-multi-assign": ["error"],
+    "no-multiple-empty-lines": ["error"],
+    "no-unneeded-ternary": ["error"],
+    "no-whitespace-before-property": ["error"],
+    "one-var": ["error", "never"],
+    "space-before-function-paren": ["error", {
+      "anonymous": "never",
+      "named": "never",
+      "asyncArrow": "always"
+    }],
+    "space-in-parens": ["error", "never"],
+    "space-infix-ops": ["error"]
+
   },
   globals: {
     DotNet: "readonly"

src/Components/Browser.JS/src/GlobalExports.ts

@@ -9,6 +9,6 @@ window['Blazor'] = {
   _internal: {
     attachRootComponentToElement,
     http: httpInternalFunctions,
-    uriHelper: uriHelperInternalFunctions
-  }
-};
+    uriHelper: uriHelperInternalFunctions,
+  },
+};

src/Components/Browser.JS/src/Platform/Circuits/AutoReconnectCircuitHandler.ts

@@ -5,9 +5,13 @@ import { ReconnectDisplay } from './ReconnectDisplay';
 import { ILogger, LogLevel } from '../Logging/ILogger';
 export class AutoReconnectCircuitHandler implements CircuitHandler {
   public static readonly MaxRetries = 5;
+
   public static readonly RetryInterval = 3000;
+
   public static readonly DialogId = 'components-reconnect-modal';
+
   public reconnectDisplay: ReconnectDisplay;
+
   public logger: ILogger;
 
   public constructor(logger: ILogger) {
@@ -20,6 +24,7 @@ export class AutoReconnectCircuitHandler implements CircuitHandler {
       }
     });
   }
+
   public onConnectionUp(): void {
     this.reconnectDisplay.hide();
   }

src/Components/Browser.JS/src/Platform/Circuits/CircuitManager.ts

@@ -3,6 +3,7 @@ import { ComponentDescriptor, MarkupRegistrationTags, StartComponentComment, End
 
 export class CircuitDescriptor {
   public circuitId: string;
+
   public components: ComponentDescriptor[];
 
   public constructor(circuitId: string, components: ComponentDescriptor[]) {

src/Components/Browser.JS/src/Platform/Circuits/ComponentDescriptor.ts

@@ -23,8 +23,11 @@ export interface MarkupRegistrationTags {
 
 export class ComponentDescriptor {
   public registrationTags: MarkupRegistrationTags;
+
   public componentId: number;
+
   public circuitId: string;
+
   public rendererId: number;
 
   public constructor(componentId: number, circuitId: string, rendererId: number, descriptor: MarkupRegistrationTags) {

src/Components/Browser.JS/src/Platform/Circuits/DefaultReconnectDisplay.ts

@@ -2,9 +2,13 @@ import { ReconnectDisplay } from './ReconnectDisplay';
 import { AutoReconnectCircuitHandler } from './AutoReconnectCircuitHandler';
 export class DefaultReconnectDisplay implements ReconnectDisplay {
   modal: HTMLDivElement;
+
   message: HTMLHeadingElement;
+
   button: HTMLButtonElement;
+
   addedToDom: boolean = false;
+
   constructor(private document: Document) {
     this.modal = this.document.createElement('div');
     this.modal.id = AutoReconnectCircuitHandler.DialogId;
@@ -21,7 +25,7 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
       'background-color: #fff',
       'opacity: 0.8',
       'text-align: center',
-      'font-weight: bold'
+      'font-weight: bold',
     ];
 
     this.modal.style.cssText = modalStyles.join(';');
@@ -31,6 +35,7 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
 
     this.button.addEventListener('click', () => window['Blazor'].reconnect());
   }
+
   show(): void {
     if (!this.addedToDom) {
       this.addedToDom = true;
@@ -40,9 +45,11 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
     this.button.style.display = 'none';
     this.message.textContent = 'Attempting to reconnect to the server...';
   }
+
   hide(): void {
     this.modal.style.display = 'none';
   }
+
   failed(): void {
     this.button.style.display = 'block';
     this.message.textContent = 'Failed to reconnect to the server.';

src/Components/Browser.JS/src/Platform/Circuits/RenderQueue.ts

@@ -7,7 +7,9 @@ export default class RenderQueue {
   private static renderQueues = new Map<number, RenderQueue>();
 
   private nextBatchId = 2;
+
   public browserRendererId: number;
+
   public logger: ILogger;
 
   public constructor(browserRendererId: number, logger: ILogger) {

src/Components/Browser.JS/src/Platform/Circuits/UserSpecifiedDisplay.ts

@@ -1,22 +1,29 @@
-import { ReconnectDisplay } from "./ReconnectDisplay";
+import { ReconnectDisplay } from './ReconnectDisplay';
 export class UserSpecifiedDisplay implements ReconnectDisplay {
   static readonly ShowClassName = 'components-reconnect-show';
+
   static readonly HideClassName = 'components-reconnect-hide';
+
   static readonly FailedClassName = 'components-reconnect-failed';
+
   constructor(private dialog: HTMLElement) {
   }
+
   show(): void {
     this.removeClasses();
     this.dialog.classList.add(UserSpecifiedDisplay.ShowClassName);
   }
+
   hide(): void {
     this.removeClasses();
     this.dialog.classList.add(UserSpecifiedDisplay.HideClassName);
   }
+
   failed(): void {
     this.removeClasses();
     this.dialog.classList.add(UserSpecifiedDisplay.FailedClassName);
   }
+
   private removeClasses() {
     this.dialog.classList.remove(UserSpecifiedDisplay.ShowClassName, UserSpecifiedDisplay.HideClassName, UserSpecifiedDisplay.FailedClassName);
   }

src/Components/Browser.JS/src/Platform/Mono/MonoPlatform.ts

@@ -21,7 +21,7 @@ export const monoPlatform: Platform = {
 
       // mono.js assumes the existence of this
       window['Browser'] = {
-        init: () => { }
+        init: () => { },
       };
       // Emscripten works by expecting the module config to be a global
       window['Module'] = createEmscriptenModuleInstance(loadAssemblyUrls, resolve, reject);
@@ -60,7 +60,7 @@ export const monoPlatform: Platform = {
     try {
       const argsBuffer = Module.stackAlloc(args.length);
       const exceptionFlagManagedInt = Module.stackAlloc(4);
-      for (var i = 0; i < args.length; ++i) {
+      for (let i = 0; i < args.length; ++i) {
         Module.setValue(argsBuffer + i * 4, args[i], 'i32');
       }
       Module.setValue(exceptionFlagManagedInt, 0, 'i32');
@@ -80,8 +80,8 @@ export const monoPlatform: Platform = {
 
   toJavaScriptString: function toJavaScriptString(managedString: System_String) {
     // Comments from original Mono sample:
-    //FIXME this is wastefull, we could remove the temp malloc by going the UTF16 route
-    //FIXME this is unsafe, cuz raw objects could be GC'd.
+    // FIXME this is wastefull, we could remove the temp malloc by going the UTF16 route
+    // FIXME this is unsafe, cuz raw objects could be GC'd.
 
     const utf8 = mono_string_get_utf8(managedString);
     const res = Module.UTF8ToString(utf8);
@@ -206,11 +206,27 @@ function createEmscriptenModuleInstance(loadAssemblyUrls: string[], onReady: ()
 
   module.preRun.push(() => {
     // By now, emscripten should be initialised enough that we can capture these methods for later use
-    const mono_wasm_add_assembly = Module.cwrap('mono_wasm_add_assembly', null, ['string', 'number', 'number']);
+    const mono_wasm_add_assembly = Module.cwrap('mono_wasm_add_assembly', null, [
+      'string',
+      'number',
+      'number',
+    ]);
     assembly_load = Module.cwrap('mono_wasm_assembly_load', 'number', ['string']);
-    find_class = Module.cwrap('mono_wasm_assembly_find_class', 'number', ['number', 'string', 'string']);
-    find_method = Module.cwrap('mono_wasm_assembly_find_method', 'number', ['number', 'string', 'number']);
-    invoke_method = Module.cwrap('mono_wasm_invoke_method', 'number', ['number', 'number', 'number']);
+    find_class = Module.cwrap('mono_wasm_assembly_find_class', 'number', [
+      'number',
+      'string',
+      'string',
+    ]);
+    find_method = Module.cwrap('mono_wasm_assembly_find_method', 'number', [
+      'number',
+      'string',
+      'number',
+    ]);
+    invoke_method = Module.cwrap('mono_wasm_invoke_method', 'number', [
+      'number',
+      'number',
+      'number',
+    ]);
     mono_string_get_utf8 = Module.cwrap('mono_wasm_string_get_utf8', 'number', ['number']);
     mono_string = Module.cwrap('mono_wasm_string_from_js', 'number', ['string']);
 
@@ -264,12 +280,12 @@ function toAbsoluteUrl(possiblyRelativeUrl: string) {
 
 function asyncLoad(url) {
   return new Promise<Uint8Array>((resolve, reject) => {
-    var xhr = new XMLHttpRequest;
+    const xhr = new XMLHttpRequest();
     xhr.open('GET', url, /* async: */ true);
     xhr.responseType = 'arraybuffer';
     xhr.onload = function xhr_onload() {
       if (xhr.status == 200 || xhr.status == 0 && xhr.response) {
-        var asm = new Uint8Array(xhr.response);
+        const asm = new Uint8Array(xhr.response);
         resolve(asm);
       } else {
         reject(xhr);
@@ -295,12 +311,12 @@ function attachInteropInvoker() {
       const assemblyNameOrDotNetObjectId = dotNetObjectId
         ? dotNetObjectId.toString()
         : assemblyName;
-      
+
       monoPlatform.callMethod(dotNetDispatcherBeginInvokeMethodHandle, null, [
         callId ? monoPlatform.toDotNetString(callId.toString()) : null,
         monoPlatform.toDotNetString(assemblyNameOrDotNetObjectId!),
         monoPlatform.toDotNetString(methodIdentifier),
-        monoPlatform.toDotNetString(argsJson)
+        monoPlatform.toDotNetString(argsJson),
       ]);
     },
 
@@ -309,7 +325,7 @@ function attachInteropInvoker() {
         assemblyName ? monoPlatform.toDotNetString(assemblyName) : null,
         monoPlatform.toDotNetString(methodIdentifier),
         dotNetObjectId ? monoPlatform.toDotNetString(dotNetObjectId.toString()) : null,
-        monoPlatform.toDotNetString(argsJson)
+        monoPlatform.toDotNetString(argsJson),
       ]) as System_String;
       return resultJsonStringPtr
         ? monoPlatform.toJavaScriptString(resultJsonStringPtr)

src/Components/Browser.JS/src/Platform/Platform.ts

@@ -24,8 +24,8 @@ export interface Platform {
 // We don't actually instantiate any of these at runtime. For perf it's preferable to
 // use the original 'number' instances without any boxing. The definitions are just
 // for compile-time checking, since TypeScript doesn't support nominal types.
-export interface MethodHandle { MethodHandle__DO_NOT_IMPLEMENT: any };
-export interface System_Object { System_Object__DO_NOT_IMPLEMENT: any };
+export interface MethodHandle { MethodHandle__DO_NOT_IMPLEMENT: any }
+export interface System_Object { System_Object__DO_NOT_IMPLEMENT: any }
 export interface System_String extends System_Object { System_String__DO_NOT_IMPLEMENT: any }
 export interface System_Array<T> extends System_Object { System_Array__DO_NOT_IMPLEMENT: any }
 export interface Pointer { Pointer__DO_NOT_IMPLEMENT: any }

src/Components/Browser.JS/src/Rendering/BrowserRenderer.ts

@@ -11,7 +11,9 @@ const rootComponentsPendingFirstRender: { [componentId: number]: LogicalElement
 
 export class BrowserRenderer {
   private eventDelegator: EventDelegator;
+
   private childComponentLocations: { [componentId: number]: LogicalElement } = {};
+
   private browserRendererId: number;
 
   public constructor(browserRendererId: number) {
@@ -388,7 +390,8 @@ function raiseEvent(event: Event, browserRendererId: number, eventHandlerId: num
     'Microsoft.AspNetCore.Components.Browser',
     'DispatchEvent',
     eventDescriptor,
-    JSON.stringify(eventArgs.data));
+    JSON.stringify(eventArgs.data)
+  );
 }
 
 function clearElement(element: Element) {
@@ -400,7 +403,7 @@ function clearElement(element: Element) {
 
 function clearBetween(start: Node, end: Node): void {
   const logicalParent = getLogicalParent(start as unknown as LogicalElement);
-  if(!logicalParent){
+  if (!logicalParent){
     throw new Error("Can't clear between nodes. The start node does not have a logical parent.");
   }
   const children = getLogicalChildrenArray(logicalParent);

src/Components/Browser.JS/src/Rendering/EventDelegator.ts

@@ -1,8 +1,23 @@
-import { EventForDotNet, UIEventArgs } from './EventForDotNet';
+import { EventForDotNet, UIEventArgs } from './EventForDotNet';
 
 const nonBubblingEvents = toLookup([
-  'abort', 'blur', 'change', 'error', 'focus', 'load', 'loadend', 'loadstart', 'mouseenter', 'mouseleave',
-  'progress', 'reset', 'scroll', 'submit', 'unload', 'DOMNodeInsertedIntoDocument', 'DOMNodeRemovedFromDocument'
+  'abort',
+  'blur',
+  'change',
+  'error',
+  'focus',
+  'load',
+  'loadend',
+  'loadstart',
+  'mouseenter',
+  'mouseleave',
+  'progress',
+  'reset',
+  'scroll',
+  'submit',
+  'unload',
+  'DOMNodeInsertedIntoDocument',
+  'DOMNodeRemovedFromDocument',
 ]);
 
 export interface OnEventCallback {
@@ -14,7 +29,9 @@ export interface OnEventCallback {
 // event listeners as required (and also maps actual events back to the given callback).
 export class EventDelegator {
   private static nextEventDelegatorId = 0;
+
   private eventsCollectionKey: string;
+
   private eventInfoStore: EventInfoStore;
 
   constructor(private onEvent: OnEventCallback) {
@@ -93,6 +110,7 @@ export class EventDelegator {
 // for a given event name changes between zero and nonzero
 class EventInfoStore {
   private infosByEventHandlerId: { [eventHandlerId: number]: EventHandlerInfo } = {};
+
   private countByEventName: { [eventName: string]: number } = {};
 
   constructor(private globalListener: EventListener) {
@@ -155,7 +173,7 @@ interface EventHandlerInfosForElement {
   // can only have one attribute with a given name, hence only one event handler with
   // that name at any one time.
   // So to keep things simple, only track one EventHandlerInfo per (element, eventName)
-  [eventName: string]: EventHandlerInfo
+  [eventName: string]: EventHandlerInfo;
 }
 
 interface EventHandlerInfo {
@@ -166,6 +184,8 @@ interface EventHandlerInfo {
 
 function toLookup(items: string[]): { [key: string]: boolean } {
   const result = {};
-  items.forEach(value => { result[value] = true; });
+  items.forEach(value => {
+    result[value] = true;
+  });
   return result;
 }