refactor: eliminate eslint errors

packages/rrdom-nodejs/src/document-nodejs.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { NodeType as RRNodeType } from 'rrweb-snapshot';
 import type { NWSAPI } from 'nwsapi';
 import type { CSSStyleDeclaration as CSSStyleDeclarationType } from 'cssstyle';
@@ -14,8 +15,11 @@ import {
   IRRDocument,
   CSSStyleDeclaration,
 } from 'rrdom';
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-var-requires
 const nwsapi = require('nwsapi');
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-var-requires
 const cssom = require('cssom');
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-var-requires
 const cssstyle = require('cssstyle');
 
 export class RRNode extends BaseRRNode {}
@@ -37,6 +41,7 @@ export class RRDocument
   private _nwsapi: NWSAPI;
   get nwsapi() {
     if (!this._nwsapi) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
       this._nwsapi = nwsapi({
         document: (this as unknown) as Document,
         DOMException: (null as unknown) as new (
@@ -53,26 +58,31 @@ export class RRDocument
     return this._nwsapi;
   }
 
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   get documentElement(): RRElement | null {
     return super.documentElement as RRElement | null;
   }
 
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   get body(): RRElement | null {
     return super.body as RRElement | null;
   }
 
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   get head() {
     return super.head as RRElement | null;
   }
 
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   get implementation(): RRDocument {
     return this;
   }
 
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   get firstElementChild(): RRElement | null {
     return this.documentElement;
@@ -109,8 +119,11 @@ export class RRDocument
   }
 
   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();
@@ -191,6 +204,7 @@ export class RRElement extends BaseRRElementImpl(RRNode) {
   private _style: CSSStyleDeclarationType;
   constructor(tagName: string) {
     super(tagName);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
     this._style = new cssstyle.CSSStyleDeclaration();
     const style = this._style;
     Object.defineProperty(this.attributes, 'style', {
@@ -203,6 +217,7 @@ export class RRElement extends BaseRRElementImpl(RRNode) {
     });
   }
 
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   get style() {
     return (this._style as unknown) as CSSStyleDeclaration;
@@ -311,7 +326,7 @@ export class RRImageElement extends RRElement {
   src: string;
   width: number;
   height: number;
-  onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+  onload: ((this: GlobalEventHandlers, ev: Event) => unknown) | null;
 }
 
 export class RRMediaElement extends BaseRRMediaElementImpl(RRElement) {}
@@ -334,6 +349,7 @@ export class RRStyleElement extends RRElement {
       for (const child of this.childNodes)
         if (child.RRNodeType === RRNodeType.Text)
           result += (child as RRText).textContent;
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
       this._sheet = cssom.parse(result);
     }
     return this._sheet;

packages/rrdom-nodejs/src/polyfill.ts

@@ -7,8 +7,9 @@ import { RRDocument, RRNode } from './document-nodejs';
  */
 export function polyfillPerformance() {
   if (typeof window !== 'undefined' || 'performance' in global) return;
-  ((global as Window & typeof globalThis)
-    .performance as unknown) = require('perf_hooks').performance;
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-var-requires
+  const performance = require('perf_hooks').performance;
+  ((global as Window & typeof globalThis).performance as unknown) = performance;
 }
 
 /**
@@ -22,11 +23,11 @@ export function polyfillRAF() {
     INTERVAL = 1_000 / FPS;
   let timeoutHandle: NodeJS.Timeout | null = null,
     rafCount = 0,
-    requests = Object.create(null);
+    requests = Object.create(null) as Record<string, (time: number) => void>;
 
   function onFrameTimer() {
     const currentRequests = requests;
-    requests = Object.create(null);
+    requests = Object.create(null) as Record<string, (time: number) => void>;
     timeoutHandle = null;
     Object.keys(currentRequests).forEach(function (id) {
       const request = currentRequests[id];
@@ -63,7 +64,9 @@ export function polyfillRAF() {
  */
 export function polyfillEvent() {
   if (typeof Event !== 'undefined') return;
-  (global.Event as unknown) = function () {};
+  (global.Event as unknown) = function () {
+    //
+  };
 }
 
 /**

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;
     }

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`,

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,15 +228,16 @@ 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,
         documentType.publicId,
         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 {

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() : ''));
 };
 
 /**