refactor: eliminate eslint errors as many as I can

.eslintrc.js

@@ -19,5 +19,8 @@ module.exports = {
   plugins: ['@typescript-eslint', 'eslint-plugin-tsdoc'],
   rules: {
     'tsdoc/syntax': 'warn',
+    '@typescript-eslint/unbound-method': 'off',
+    '@typescript-eslint/no-unsafe-member-access': 'off',
+    '@typescript-eslint/restrict-template-expressions': 'off',
   },
 };

packages/rrweb/package.json

@@ -78,7 +78,7 @@
     "@xstate/fsm": "^1.4.0",
     "base64-arraybuffer": "^1.0.1",
     "fflate": "^0.4.4",
-    "mitt": "^1.1.3",
+    "mitt": "^3.0.0",
     "rrdom": "^0.1.2",
     "rrweb-snapshot": "^1.1.14"
   }

packages/rrweb/src/replay/index.ts

@@ -42,7 +42,6 @@ import {
   viewportResizeDimension,
   missingNodeMap,
   addedNodeMutation,
-  missingNode,
   incrementalSnapshotEvent,
   incrementalData,
   ReplayerEvents,
@@ -54,7 +53,6 @@ import {
   scrollData,
   inputData,
   canvasMutationData,
-  styleAttributeValue,
   styleValueWithPriority,
   mouseMovePos,
   IWindow,
@@ -83,8 +81,7 @@ const SKIP_TIME_THRESHOLD = 10 * 1000;
 const SKIP_TIME_INTERVAL = 5 * 1000;
 
 // https://github.com/rollup/rollup/issues/1267#issuecomment-296395734
-// tslint:disable-next-line
-const mitt = (mittProxy as any).default || mittProxy;
+const mitt = mittProxy.default || mittProxy;
 
 const REPLAY_CONSOLE_PREFIX = '[replayer]';
 
@@ -188,7 +185,7 @@ export class Replayer {
             canvasMutationData: canvasMutationData,
             target: HTMLCanvasElement,
           ) => {
-            canvasMutation({
+            void canvasMutation({
               event: canvasEvent,
               mutation: canvasMutationData,
               target,
@@ -340,8 +337,10 @@ export class Replayer {
 
   public setConfig(config: Partial<playerConfig>) {
     Object.keys(config).forEach((key) => {
-      // @ts-ignore
-      this.config[key] = config[key];
+      const newConfigValue = config[key as keyof playerConfig];
+      (this.config as Record<keyof playerConfig, typeof newConfigValue>)[
+        key as keyof playerConfig
+      ] = config[key as keyof playerConfig];
     });
     if (!this.config.skipInactive) {
       this.backToNormal();
@@ -404,7 +403,7 @@ export class Replayer {
    * So the implementation of play at any time offset will always iterate
    * all of the events, cast event before the offset synchronously
    * and cast event after the offset asynchronously with timer.
-   * @param timeOffset number
+   * @param timeOffset - number
    */
   public play(timeOffset = 0) {
     if (this.service.state.matches('paused')) {
@@ -452,7 +451,7 @@ export class Replayer {
     if (indicatesTouchDevice(event)) {
       this.mouse.classList.add('touch-device');
     }
-    Promise.resolve().then(() =>
+    void Promise.resolve().then(() =>
       this.service.send({ type: 'ADD_EVENT', payload: { event } }),
     );
   }
@@ -714,7 +713,7 @@ export class Replayer {
       this.waitForStylesheetLoad();
     }
     if (this.config.UNSAFE_replayCanvas) {
-      this.preloadAllImages();
+      void this.preloadAllImages();
     }
   }
 
@@ -875,7 +874,7 @@ export class Replayer {
       if (!arg || typeof arg !== 'object') {
         // do nothing
       } else if ('rr_type' in arg && 'args' in arg) {
-        if (this.hasImageArg(arg.args)) return true;
+        if (this.hasImageArg(arg.args as any[])) return true;
       } else if ('rr_type' in arg && arg.rr_type === 'HTMLImageElement') {
         return true; // has image!
       } else if (arg instanceof Array) {
@@ -891,9 +890,9 @@ export class Replayer {
       if (!arg || typeof arg !== 'object') {
         // do nothing
       } else if ('rr_type' in arg && 'args' in arg) {
-        images.push(...this.getImageArgs(arg.args));
+        images.push(...this.getImageArgs(arg.args as any[]));
       } else if ('rr_type' in arg && arg.rr_type === 'HTMLImageElement') {
-        images.push(arg.src);
+        images.push(arg.src as string);
       } else if (arg instanceof Array) {
         images.push(...this.getImageArgs(arg));
       }
@@ -940,7 +939,7 @@ export class Replayer {
       const ctx = canvas.getContext('2d');
       const imgd = ctx?.createImageData(canvas.width, canvas.height);
       let d = imgd?.data;
-      d = JSON.parse(data.args[0]);
+      d = JSON.parse(data.args[0]) as Uint8ClampedArray;
       ctx?.putImageData(imgd!, 0, 0);
     }
   }
@@ -1013,6 +1012,7 @@ export class Replayer {
           });
           // add a dummy action to keep timer alive
           this.timer.addAction({
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
             doAction() {},
             delay: e.delay! - d.positions[0]?.timeOffset,
           });
@@ -1174,7 +1174,7 @@ export class Replayer {
             // i.e. media will evntualy start to play when data is loaded
             // 'canplay' event fires even when currentTime attribute changes which may lead to
             // unexpeted behavior
-            mediaEl.play();
+            void mediaEl.play();
           }
         } catch (error) {
           if (this.config.showWarning) {
@@ -1322,7 +1322,7 @@ export class Replayer {
           if (!target) {
             return this.debugNodeNotFound(d, d.id);
           }
-          canvasMutation({
+          void canvasMutation({
             event: e,
             mutation: d,
             target: target as HTMLCanvasElement,
@@ -1337,7 +1337,9 @@ export class Replayer {
         try {
           const fontFace = new FontFace(
             d.family,
-            d.buffer ? new Uint8Array(JSON.parse(d.fontSource)) : d.fontSource,
+            d.buffer
+              ? new Uint8Array(JSON.parse(d.fontSource) as Iterable<number>)
+              : d.fontSource,
             d.descriptors,
           );
           this.iframe.contentDocument?.fonts.add(fontFace);
@@ -1711,8 +1713,8 @@ export class Replayer {
   /**
    * Apply the scroll data on real elements.
    * If the replayer is in sync mode, smooth scroll behavior should be disabled.
-   * @param d the scroll data
-   * @param isSync whether the replayer is in sync mode(fast-forward)
+   * @param d - the scroll data
+   * @param isSync - whether the replayer is in sync mode(fast-forward)
    */
   private applyScroll(d: scrollData, isSync: boolean) {
     const target = this.mirror.getNode(d.id);

packages/rrweb/src/replay/smoothscroll.ts

@@ -3,8 +3,8 @@
  * Add support of customize target window and document
  */
 
+/* eslint-disable */
 // @ts-nocheck
-// tslint:disable
 export function polyfill(w: Window = window, d = document) {
   // return if scroll behavior is supported and polyfill is not forced
   if (

packages/rrweb/src/utils.ts

@@ -70,14 +70,14 @@ export function throttle<T>(
 ) {
   let timeout: ReturnType<typeof setTimeout> | null = null;
   let previous = 0;
-  return function (arg: T) {
+  return function (...args: T[]) {
     const now = Date.now();
     if (!previous && options.leading === false) {
       previous = now;
     }
     const remaining = wait - (now - previous);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-this-alias
     const context = this;
-    const args = arguments;
     if (remaining <= 0 || remaining > wait) {
       if (timeout) {
         clearTimeout(timeout);

packages/rrweb/test/integration.test.ts

@@ -12,7 +12,12 @@ import {
   generateRecordSnippet,
   ISuite,
 } from './utils';
-import { recordOptions, eventWithTime, EventType } from '../src/types';
+import {
+  recordOptions,
+  eventWithTime,
+  EventType,
+  RecordPlugin,
+} from '../src/types';
 import { visitSnapshot, NodeType } from 'rrweb-snapshot';
 
 describe('record integration tests', function (this: ISuite) {
@@ -442,8 +447,8 @@ describe('record integration tests', function (this: ISuite) {
     const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(
-      getHtml.call(this, 'log.html', {
-        plugins: '[rrwebConsoleRecord.getRecordConsolePlugin()]',
+      getHtml('log.html', {
+        plugins: ('[rrwebConsoleRecord.getRecordConsolePlugin()]' as unknown) as RecordPlugin<unknown>[],
       }),
     );
 

packages/rrweb/tsconfig.json

@@ -11,7 +11,8 @@
     "outDir": "build",
     "lib": ["es6", "dom"],
     "downlevelIteration": true,
-    "importsNotUsedAsValues": "error"
+    "importsNotUsedAsValues": "error",
+    "strictBindCallApply": true
   },
   "exclude": ["test"],
   "include": [

yarn.lock

@@ -7943,10 +7943,10 @@ minizlib@^2.0.0, minizlib@^2.1.1:
     minipass "^3.0.0"
     yallist "^4.0.0"
 
-mitt@^1.1.3:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/mitt/-/mitt-1.2.0.tgz"
-  integrity sha512-r6lj77KlwqLhIUku9UWYes7KJtsczvolZkzp8hbaDPPaE24OmWl5s539Mytlj22siEQKosZ26qCBgda2PKwoJw==
+mitt@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.0.tgz#69ef9bd5c80ff6f57473e8d89326d01c414be0bd"
+  integrity sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==
 
 mkdirp-classic@^0.5.2:
   version "0.5.3"