refactor: eliminate eslint errors (#920)

* refactor: eliminate eslint errors as many as I can * refactor: fix more eslint errors in the record module * LINT: fix @typescript-eslint/unbound-method * LINT: fix all eslint errors in source code * LINT: fix as many eslint warnings as possible Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
2022-07-10 17:49:20 +10:00
parent 15cb0b8cd3
commit 83394c3db4
44 changed files with 524 additions and 374 deletions
--- a/packages/rrdom/src/diff.ts
+++ b/packages/rrdom/src/diff.ts
@@ -125,8 +125,8 @@ export function diff(
          const newMediaRRElement = newRRElement as RRMediaElement;
          if (newMediaRRElement.paused !== undefined)
            newMediaRRElement.paused
-              ? oldMediaElement.pause()
-              : oldMediaElement.play();
+              ? void oldMediaElement.pause()
+              : void oldMediaElement.play();
          if (newMediaRRElement.muted !== undefined)
            oldMediaElement.muted = newMediaRRElement.muted;
          if (newMediaRRElement.volume !== undefined)
@@ -383,10 +383,7 @@ export function createOrGetNode(
      let tagName = (rrNode as IRRElement).tagName.toLowerCase();
      tagName = SVGTagMap[tagName] || tagName;
      if (sn && 'isSVG' in sn && sn?.isSVG) {
-        node = document.createElementNS(
-          NAMESPACES['svg'],
-          (rrNode as IRRElement).tagName.toLowerCase(),
-        );
+        node = document.createElementNS(NAMESPACES['svg'], tagName);
      } else node = document.createElement((rrNode as IRRElement).tagName);
      break;
    }
--- a/packages/rrdom/src/document.ts
+++ b/packages/rrdom/src/document.ts
@@ -119,6 +119,7 @@ export interface IRRCDATASection extends IRRNode {
 }

 type ConstrainedConstructor<T = Record<string, unknown>> = new (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  ...args: any[]
 ) => T;

@@ -138,7 +139,8 @@ export class BaseRRNode implements IRRNode {
  public readonly nodeName: string;
  public readonly RRNodeType: RRNodeType;

-  constructor(...args: any[]) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  constructor(..._args: any[]) {
    //
  }

@@ -166,19 +168,22 @@ export class BaseRRNode implements IRRNode {
    return false;
  }

+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  public appendChild(_newChild: IRRNode): IRRNode {
    throw new Error(
      `RRDomException: Failed to execute 'appendChild' on 'RRNode': This RRNode type does not support this method.`,
    );
  }

+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  public insertBefore(_newChild: IRRNode, _refChild: IRRNode | null): IRRNode {
    throw new Error(
      `RRDomException: Failed to execute 'insertBefore' on 'RRNode': This RRNode type does not support this method.`,
    );
  }

-  public removeChild(node: IRRNode): IRRNode {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public removeChild(_node: IRRNode): IRRNode {
    throw new Error(
      `RRDomException: Failed to execute 'removeChild' on 'RRNode': This RRNode type does not support this method.`,
    );
@@ -306,8 +311,8 @@ export function BaseRRDocumentImpl<
    /**
     * Adhoc implementation for setting xhtml namespace in rebuilt.ts (rrweb-snapshot).
     * There are two lines used this function:
-     * 1. doc.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">')
-     * 2. doc.write('<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "">')
+     * 1. doc.write('\<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""\>')
+     * 2. doc.write('\<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ""\>')
     */
    public write(content: string) {
      let publicId;
@@ -329,8 +334,11 @@ export function BaseRRDocumentImpl<
    }

    createDocument(
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      _namespace: string | null,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      _qualifiedName: string | null,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      _doctype?: DocumentType | null,
    ): IRRDocument {
      return new BaseRRDocument();
@@ -542,12 +550,14 @@ export function BaseRRElementImpl<
      return node;
    }

+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    public attachShadow(_init: ShadowRootInit): IRRElement {
      const shadowRoot = this.ownerDocument.createElement('SHADOWROOT');
      this.shadowRoot = shadowRoot;
      return shadowRoot;
    }

+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    public dispatchEvent(_event: Event) {
      return true;
    }
@@ -570,6 +580,7 @@ export function BaseRRMediaElementImpl<
    public volume?: number;
    public paused?: boolean;
    public muted?: boolean;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    attachShadow(_init: ShadowRootInit): IRRElement {
      throw new Error(
        `RRDomException: Failed to execute 'attachShadow' on 'RRElement': This RRElement does not support attachShadow`,
--- a/packages/rrdom/src/index.ts
+++ b/packages/rrdom/src/index.ts
@@ -35,7 +35,7 @@ import {
 export class RRDocument extends BaseRRDocumentImpl(RRNode) {
  // In the rrweb replayer, there are some unserialized nodes like the element that stores the injected style rules.
  // These unserialized nodes may interfere the execution of the diff algorithm.
-  // The id of serialized node is larger than 0. So this value less than 0 is used as id for these unserialized nodes.
+  // The id of serialized node is larger than 0. So this value less than 0 is used as id for these unserialized nodes.
  private _unserializedId = -1;

  /**
@@ -57,8 +57,11 @@ export class RRDocument extends BaseRRDocumentImpl(RRNode) {
  }

  createDocument(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    _namespace: string | null,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    _qualifiedName: string | null,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    _doctype?: DocumentType | null,
  ) {
    return new RRDocument();
@@ -201,9 +204,9 @@ function getValidTagName(element: HTMLElement): string {

 /**
 * Build a RRNode from a real Node.
- * @param node the real Node
- * @param rrdom the RRDocument
- * @param domMirror the NodeMirror that records the real document tree
+ * @param node - the real Node
+ * @param rrdom - the RRDocument
+ * @param domMirror - the NodeMirror that records the real document tree
 * @returns the built RRNode
 */
 export function buildFromNode(
@@ -225,7 +228,7 @@ export function buildFromNode(
          | 'CSS1Compat';
      }
      break;
-    case NodeType.DOCUMENT_TYPE_NODE:
+    case NodeType.DOCUMENT_TYPE_NODE: {
      const documentType = node as DocumentType;
      rrNode = rrdom.createDocumentType(
        documentType.name,
@@ -233,7 +236,8 @@ export function buildFromNode(
        documentType.systemId,
      );
      break;
-    case NodeType.ELEMENT_NODE:
+    }
+    case NodeType.ELEMENT_NODE: {
      const elementNode = node as HTMLElement;
      const tagName = getValidTagName(elementNode);
      rrNode = rrdom.createElement(tagName);
@@ -248,6 +252,7 @@ export function buildFromNode(
       * Because if these values are changed later, the mutation will be applied through the batched input events on its RRElement after the diff algorithm is executed.
       */
      break;
+    }
    case NodeType.TEXT_NODE:
      rrNode = rrdom.createTextNode((node as Text).textContent || '');
      break;
@@ -280,9 +285,9 @@ export function buildFromNode(

 /**
 * Build a RRDocument from a real document tree.
- * @param dom the real document tree
- * @param domMirror the NodeMirror that records the real document tree
- * @param rrdom the rrdom object to be constructed
+ * @param dom - the real document tree
+ * @param domMirror - the NodeMirror that records the real document tree
+ * @param rrdom - the rrdom object to be constructed
 * @returns the build rrdom
 */
 export function buildFromDom(
@@ -390,7 +395,7 @@ export class Mirror implements IMirror<RRNode> {

 /**
 * Get a default serializedNodeWithId value for a RRNode.
- * @param id the serialized id to assign
+ * @param id - the serialized id to assign
 */
 export function getDefaultSN(node: IRRNode, id: number): serializedNodeWithId {
  switch (node.RRNodeType) {
@@ -400,7 +405,7 @@ export function getDefaultSN(node: IRRNode, id: number): serializedNodeWithId {
        type: node.RRNodeType,
        childNodes: [],
      };
-    case RRNodeType.DocumentType:
+    case RRNodeType.DocumentType: {
      const doctype = node as IRRDocumentType;
      return {
        id,
@@ -409,6 +414,7 @@ export function getDefaultSN(node: IRRNode, id: number): serializedNodeWithId {
        publicId: doctype.publicId,
        systemId: doctype.systemId,
      };
+    }
    case RRNodeType.Element:
      return {
        id,
@@ -438,6 +444,33 @@ export function getDefaultSN(node: IRRNode, id: number): serializedNodeWithId {
  }
 }

+/**
+ * Print the RRDom as a string.
+ * @param rootNode - the root node of the RRDom tree
+ * @param mirror - a rrweb or rrdom Mirror
+ * @returns printed string
+ */
+export function printRRDom(rootNode: IRRNode, mirror: IMirror<IRRNode>) {
+  return walk(rootNode, mirror, '');
+}
+function walk(node: IRRNode, mirror: IMirror<IRRNode>, blankSpace: string) {
+  let printText = `${blankSpace}${mirror.getId(node)} ${node.toString()}\n`;
+  if (node.RRNodeType === RRNodeType.Element) {
+    const element = node as IRRElement;
+    if (element.shadowRoot)
+      printText += walk(element.shadowRoot, mirror, blankSpace + '  ');
+  }
+  for (const child of node.childNodes)
+    printText += walk(child, mirror, blankSpace + '  ');
+  if (node.nodeName === 'IFRAME')
+    printText += walk(
+      (node as RRIFrameElement).contentDocument,
+      mirror,
+      blankSpace + '  ',
+    );
+  return printText;
+}
+
 export { RRNode };

 export {
--- a/packages/rrdom/src/style.ts
+++ b/packages/rrdom/src/style.ts
@@ -33,7 +33,7 @@ const camelizeRE = /-([a-z])/g;
 const CUSTOM_PROPERTY_REGEX = /^--[a-zA-Z0-9-]+$/;
 export const camelize = (str: string): string => {
  if (CUSTOM_PROPERTY_REGEX.test(str)) return str;
-  return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''));
+  return str.replace(camelizeRE, (_, c: string) => (c ? c.toUpperCase() : ''));
 };

 /**
--- a/packages/rrdom/test/diff.test.ts
+++ b/packages/rrdom/test/diff.test.ts
@@ -905,8 +905,8 @@ describe('diff algorithm for rrdom', () => {
      /* Number of elements remains the same and no element will be added or removed. */
      let oldElementsNum = 15,
        newElementsNum = 15;
-      let oldElementsIds = [],
-        newElementsIds = [];
+      let oldElementsIds: number[] = [],
+        newElementsIds: number[] = [];
      for (let i = 1; i <= oldElementsNum; i++) {
        oldElementsIds.push(i);
        newElementsIds.push(i);
@@ -950,8 +950,8 @@ describe('diff algorithm for rrdom', () => {
      /* May need to add or remove some elements. */
      let oldElementsNum = 20,
        newElementsNum = 30;
-      let oldElementsIds = [],
-        newElementsIds = [];
+      let oldElementsIds: number[] = [],
+        newElementsIds: number[] = [];
      for (let i = 1; i <= oldElementsNum + 10; i++) oldElementsIds.push(i);
      for (let i = 1; i <= newElementsNum + 10; i++) newElementsIds.push(i);
      shuffle(oldElementsIds);