Fixed linting errors and warnings (#5619)

# Pull Request

## 📖 Description

<!---
Provide some background and a description of your work.
What problem does this change solve?
Is this a breaking change, chore, fix, feature, etc?
-->
This change does the following:
- Allow `no-non-null-assertion`
- Fixes all other warnings and errors

## 👩‍💻 Reviewer Notes

<!---
Provide some notes for reviewers to help them provide targeted feedback and testing.

Do you recommend a smoke test for this PR? What steps should be followed?
Are there particular areas of the code the reviewer should focus on?
-->
@EisenbergEffect since these changes affect your work please take a close look, most of the changes are benign but I did move code around to best minimize ignoring the no-use-before-define issues.

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [ ] I have included a change request file using `$ yarn change`
- [ ] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.

change/@microsoft-fast-element-486e25bf-0f0b-42c6-adcc-8a0e99ed88a3.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Fixed linting errors and warnings",
+  "packageName": "@microsoft/fast-element",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/web-components/fast-element/.eslintrc.cjs

@@ -4,6 +4,7 @@ module.exports = {
         "import/extensions": ["error", "always"],
         "max-classes-per-file": "off",
         "no-case-declarations": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
         "@typescript-eslint/ban-types": [
             "error",
             {

packages/web-components/fast-element/src/dom.ts

@@ -40,7 +40,7 @@ const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
 let id = 0;
 
 /** @internal */
-export const nextId = () => `${marker}-${++id}`;
+export const nextId = (): string => `${marker}-${++id}`;
 
 /** @internal */
 export const _interpolationStart = `${marker}{`;

packages/web-components/fast-element/src/observation/array-change-records.ts

@@ -164,6 +164,51 @@ function intersect(start1: number, end1: number, start2: number, end2: number):
     return end1 - start1; // Contained
 }
 
+/**
+ * A splice map is a representation of how a previous array of items
+ * was transformed into a new array of items. Conceptually it is a list of
+ * tuples of
+ *
+ *   <index, removed, addedCount>
+ *
+ * which are kept in ascending index order of. The tuple represents that at
+ * the |index|, |removed| sequence of items were removed, and counting forward
+ * from |index|, |addedCount| items were added.
+ * @public
+ */
+export class Splice {
+    constructor(
+        /**
+         * The index that the splice occurs at.
+         */
+        public index: number,
+
+        /**
+         * The items that were removed.
+         */
+        public removed: any[],
+
+        /**
+         * The  number of items that were added.
+         */
+        public addedCount: number
+    ) {}
+
+    static normalize(
+        previous: unknown[] | undefined,
+        current: unknown[],
+        changes: Splice[] | undefined
+    ): Splice[] | undefined {
+        return previous === void 0
+            ? changes!.length > 1
+                ? /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+                  project(current, changes!)
+                : changes
+            : /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+              calc(current, 0, current.length, previous, 0, previous.length);
+    }
+}
+
 /**
  * @remarks
  * Lacking individual splice mutation information, the minimal set of
@@ -386,46 +431,3 @@ function project(array: unknown[], changes: Splice[]): Splice[] {
 
     return splices;
 }
-
-/**
- * A splice map is a representation of how a previous array of items
- * was transformed into a new array of items. Conceptually it is a list of
- * tuples of
- *
- *   <index, removed, addedCount>
- *
- * which are kept in ascending index order of. The tuple represents that at
- * the |index|, |removed| sequence of items were removed, and counting forward
- * from |index|, |addedCount| items were added.
- * @public
- */
-export class Splice {
-    constructor(
-        /**
-         * The index that the splice occurs at.
-         */
-        public index: number,
-
-        /**
-         * The items that were removed.
-         */
-        public removed: any[],
-
-        /**
-         * The  number of items that were added.
-         */
-        public addedCount: number
-    ) {}
-
-    static normalize(
-        previous: unknown[] | undefined,
-        current: unknown[],
-        changes: Splice[] | undefined
-    ) {
-        return previous === void 0
-            ? changes!.length > 1
-                ? project(current, changes!)
-                : changes
-            : calc(current, 0, current.length, previous, 0, previous.length);
-    }
-}

packages/web-components/fast-element/src/observation/array-observer.ts

@@ -60,7 +60,7 @@ class ArrayObserver extends SubscriberSet {
         this.notify(Splice.normalize(oldCollection, this.subject, splices));
     }
 
-    private enqueue() {
+    private enqueue(): void {
         if (this.needsQueue) {
             this.needsQueue = false;
             DOM.queueUpdate(this);
@@ -77,9 +77,9 @@ const sort = proto.sort;
 const splice = proto.splice;
 const unshift = proto.unshift;
 const arrayOverrides = {
-    pop() {
+    pop(...args) {
         const notEmpty = this.length > 0;
-        const result = pop.apply(this, arguments);
+        const result = pop.apply(this, args);
         const o = this.$fastController as ArrayObserver;
 
         if (o !== void 0 && notEmpty) {
@@ -89,23 +89,20 @@ const arrayOverrides = {
         return result;
     },
 
-    push() {
-        const result = push.apply(this, arguments);
+    push(...args) {
+        const result = push.apply(this, args);
         const o = this.$fastController as ArrayObserver;
 
         if (o !== void 0) {
             o.addSplice(
-                adjustIndex(
-                    new Splice(this.length - arguments.length, [], arguments.length),
-                    this
-                )
+                adjustIndex(new Splice(this.length - args.length, [], args.length), this)
             );
         }
 
         return result;
     },
 
-    reverse() {
+    reverse(...args) {
         let oldArray;
         const o = this.$fastController as ArrayObserver;
 
@@ -114,7 +111,7 @@ const arrayOverrides = {
             oldArray = this.slice();
         }
 
-        const result = reverse.apply(this, arguments);
+        const result = reverse.apply(this, args);
 
         if (o !== void 0) {
             o.reset(oldArray);
@@ -123,9 +120,9 @@ const arrayOverrides = {
         return result;
     },
 
-    shift() {
+    shift(...args) {
         const notEmpty = this.length > 0;
-        const result = shift.apply(this, arguments);
+        const result = shift.apply(this, args);
         const o = this.$fastController as ArrayObserver;
 
         if (o !== void 0 && notEmpty) {
@@ -135,7 +132,7 @@ const arrayOverrides = {
         return result;
     },
 
-    sort() {
+    sort(...args) {
         let oldArray;
         const o = this.$fastController as ArrayObserver;
 
@@ -144,7 +141,7 @@ const arrayOverrides = {
             oldArray = this.slice();
         }
 
-        const result = sort.apply(this, arguments);
+        const result = sort.apply(this, args);
 
         if (o !== void 0) {
             o.reset(oldArray);
@@ -153,18 +150,14 @@ const arrayOverrides = {
         return result;
     },
 
-    splice() {
-        const result = splice.apply(this, arguments);
+    splice(...args) {
+        const result = splice.apply(this, args);
         const o = this.$fastController as ArrayObserver;
 
         if (o !== void 0) {
             o.addSplice(
                 adjustIndex(
-                    new Splice(
-                        +arguments[0],
-                        result,
-                        arguments.length > 2 ? arguments.length - 2 : 0
-                    ),
+                    new Splice(+args[0], result, args.length > 2 ? args.length - 2 : 0),
                     this
                 )
             );
@@ -173,12 +166,12 @@ const arrayOverrides = {
         return result;
     },
 
-    unshift() {
-        const result = unshift.apply(this, arguments);
+    unshift(...args) {
+        const result = unshift.apply(this, args);
         const o = this.$fastController as ArrayObserver;
 
         if (o !== void 0) {
-            o.addSplice(adjustIndex(new Splice(0, [], arguments.length), this));
+            o.addSplice(adjustIndex(new Splice(0, [], args.length), this));
         }
 
         return result;