fix: lint errors from adding recordDOM option

.eslintrc.js

@@ -21,5 +21,9 @@ module.exports = {
   plugins: ['@typescript-eslint', 'eslint-plugin-tsdoc', 'jest', 'compat'],
   rules: {
     'tsdoc/syntax': 'warn',
+    '@typescript-eslint/no-unused-vars': ['error', {
+      varsIgnorePattern: '^_',
+      argsIgnorePattern: '^_',
+    }],
   },
 };

packages/rrweb-snapshot/src/rebuild.ts

@@ -5,7 +5,6 @@ import {
   tagMap,
   elementNode,
   BuildCache,
-  attributes,
   legacyAttributes,
 } from './types';
 import { isElement, Mirror, isNodeMetaEqual } from './utils';
@@ -478,13 +477,16 @@ export function buildNodeWithSN(
 }
 
 function visit(mirror: Mirror, onVisit: (node: Node) => void) {
-  function walk(node: Node) {
+  function walk(node: Node | null) {
+    if (!node) {
+      return;
+    }
     onVisit(node);
   }
 
   for (const id of mirror.getIds()) {
     if (mirror.has(id)) {
-      walk(mirror.getNode(id)!);
+      walk(mirror.getNode(id));
     }
   }
 }

packages/rrweb-snapshot/src/snapshot.ts

@@ -385,11 +385,6 @@
   iframeEl.addEventListener('load', listener);
 }
 
-function isStylesheetLoaded(link: HTMLLinkElement) {
-  if (!link.getAttribute('href')) return true; // nothing to load
-  return link.sheet !== null;
-}
-
 function onceStylesheetLoaded(
   link: HTMLLinkElement,
   listener: () => unknown,
@@ -554,7 +549,7 @@
         // So we'll be conservative and keep textContent as-is.
       } else if ((n.parentNode as HTMLStyleElement).sheet?.cssRules) {
         textContent = stringifyStylesheet(
           (n.parentNode as HTMLStyleElement).sheet!,
         );
       }
     } catch (err) {
@@ -648,7 +643,7 @@
     if (cssText) {
       delete attributes.rel;
       delete attributes.href;
       attributes._cssText = absoluteToStylesheet(cssText, stylesheet!.href!);
     }
   }
   // dynamic stylesheet
@@ -742,10 +737,10 @@
     const recordInlineImage = () => {
       image.removeEventListener('load', recordInlineImage);
       try {
         canvasService!.width = image.naturalWidth;
         canvasService!.height = image.naturalHeight;
         canvasCtx!.drawImage(image, 0, 0);
         attributes.rr_dataURL = canvasService!.toDataURL(
           dataURLOptions.type,
           dataURLOptions.quality,
         );

packages/rrweb-snapshot/src/utils.ts

@@ -71,7 +71,7 @@ declare interface CSSImportRule extends CSSRule {
  * Browsers sometimes incorrectly escape `@import` on `.cssText` statements.
  * This function tries to correct the escaping.
  * more info: https://bugs.chromium.org/p/chromium/issues/detail?id=1472259
- * @param cssImportRule
+ * @param cssImportRule - A CSSImportRule
  * @returns `cssText` with browser inconsistencies fixed, or null if not applicable.
  */
 export function escapeImportStatement(rule: CSSImportRule): string {

packages/rrweb/src/plugins/console/replay/index.ts

@@ -5,7 +5,7 @@
 
 /**
  * define an interface to replay log records
- * (data: logData) => void> function to display the log data
+ * (data: logData) =\> void - function to display the log data
  */
 type ReplayLogger = Partial<Record<LogLevel, (data: LogData) => void>>;
 
@@ -56,7 +56,7 @@
    */
   public getConsoleLogger(): ReplayLogger {
     const replayLogger: ReplayLogger = {};
     for (const level of this.config.level!) {
       if (level === 'trace') {
         replayLogger[level] = (data: LogData) => {
           const logger = (console.log as unknown as PatchedConsoleLog)[
@@ -128,7 +128,7 @@
       if (logData) {
         try {
           if (typeof replayLogger[logData.level] === 'function') {
             replayLogger[logData.level]!(logData);
           }
         } catch (error) {
           if (context.replayer.config.showWarning) {

packages/rrweb/src/record/observer.ts

@@ -160,7 +160,7 @@
           | IncrementalSource.TouchMove
           | IncrementalSource.Drag,
       ) => {
         const totalOffset = Date.now() - timeBaseline!;
         mousemoveCb(
           positions.map((p) => {
             p.timeOffset -= totalOffset;
@@ -1297,10 +1297,18 @@
   const inputHandler = initInputObserver(o);
   const mediaInteractionHandler = initMediaInteractionObserver(o);
 
-  let styleSheetObserver = () => {};
-  let adoptedStyleSheetObserver = () => {};
-  let styleDeclarationObserver = () => {};
-  let fontObserver = () => {};
+  let styleSheetObserver = () => {
+    /* noop if !recordDOM */
+  };
+  let adoptedStyleSheetObserver = () => {
+    /* noop if !recordDOM */
+  };
+  let styleDeclarationObserver = () => {
+    /* noop if !recordDOM */
+  };
+  let fontObserver = () => {
+    /* noop if !recordDOM */
+  };
   if (o.recordDOM) {
     styleSheetObserver = initStyleSheetObserver(o, { win: currentWindow });
     adoptedStyleSheetObserver = initAdoptedStyleSheetObserver(o, o.doc);

packages/rrweb/src/record/observers/canvas/2d.ts

@@ -1,4 +1,3 @@
-import type { Mirror } from 'rrweb-snapshot';
 import {
   blockClass,
   CanvasContext,

packages/rrweb/src/record/observers/canvas/canvas-manager.ts

@@ -98,7 +98,7 @@
       this.pendingCanvasMutations.set(target, []);
     }
 
     this.pendingCanvasMutations.get(target)!.push(mutation);
   };
 
   private initCanvasFPSObserver(
@@ -280,7 +280,7 @@
 
   flushPendingCanvasMutations() {
     this.pendingCanvasMutations.forEach(
-      (values: canvasMutationCommand[], canvas: HTMLCanvasElement) => {
+      (_values: canvasMutationCommand[], canvas: HTMLCanvasElement) => {
         const id = this.mirror.getId(canvas);
         this.flushPendingCanvasMutationFor(canvas, id);
       },
@@ -297,7 +297,7 @@
     if (!valuesWithType || id === -1) return;
 
     const values = valuesWithType.map((value) => {
-      const { type, ...rest } = value;
+      const { type: _type, ...rest } = value;
       return rest;
     });
     const { type } = valuesWithType[0];

packages/rrweb/src/record/observers/canvas/webgl.ts

@@ -16,7 +16,7 @@ function patchGLPrototype(
   cb: canvasManagerMutationCallback,
   blockClass: blockClass,
   blockSelector: string | null,
-  mirror: Mirror,
+  _mirror: Mirror,
   win: IWindow,
 ): listenerHandler[] {
   const handlers: listenerHandler[] = [];

packages/rrweb/src/record/stylesheet-manager.ts

@@ -81,7 +81,7 @@ export class StylesheetManager {
   }
 
   // TODO: take snapshot on stylesheet reload by applying event listener
-  private trackStylesheetInLinkElement(linkEl: HTMLLinkElement) {
+  private trackStylesheetInLinkElement(_linkEl: HTMLLinkElement) {
     // linkEl.addEventListener('load', () => {
     //   // re-loaded, maybe take another snapshot?
     // });

packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts

@@ -30,6 +30,7 @@ async function getTransparentBlobFor(
 ): Promise<string> {
   const id = `${width}-${height}`;
   if ('OffscreenCanvas' in globalThis) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     if (transparentBlobMap.has(id)) return transparentBlobMap.get(id)!;
     const offscreen = new OffscreenCanvas(width, height);
     offscreen.getContext('2d'); // creates rendering context for `converToBlob`
@@ -58,9 +59,9 @@ worker.onmessage = async function (e) {
     );
 
     const offscreen = new OffscreenCanvas(width, height);
-    const ctx = offscreen.getContext('2d')!;
+    const ctx = offscreen.getContext('2d');
 
-    ctx.drawImage(bitmap, 0, 0);
+    ctx && ctx.drawImage(bitmap, 0, 0);
     bitmap.close();
     const blob = await offscreen.convertToBlob(dataURLOptions); // takes a while
     const type = blob.type;

packages/rrweb/src/replay/canvas/webgl.ts

@@ -12,10 +12,11 @@
   try {
     if (type === CanvasContext.WebGL) {
       return (
-        target.getContext('webgl')! || target.getContext('experimental-webgl')
+        target.getContext('webgl') ||
+        (target.getContext('experimental-webgl') as WebGLRenderingContext)
       );
     }
-    return target.getContext('webgl2')!;
+    return target.getContext('webgl2');
   } catch (e) {
     return null;
   }
@@ -36,7 +37,7 @@
 
 function saveToWebGLVarMap(
   ctx: WebGLRenderingContext | WebGL2RenderingContext,
   result: any,
 ) {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   if (!result?.constructor) return; // probably null or undefined
@@ -75,7 +76,7 @@
     if (mutation.setter) {
       // skip some read-only type checks
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       (ctx as any)[mutation.property] = mutation.args[0];
       return;
     }
     const original = ctx[

packages/rrweb/src/replay/index.ts

@@ -882,9 +882,10 @@
       const sn = (mirror as TMirror).getMeta(builtNode as unknown as TNode);
       if (
         sn?.type === NodeType.Element &&
-        sn?.tagName.toUpperCase() === 'HTML'
+        sn?.tagName.toUpperCase() === 'HTML' &&
+        iframeEl.contentDocument
       ) {
-        const { documentElement, head } = iframeEl.contentDocument!;
+        const { documentElement, head } = iframeEl.contentDocument;
         this.insertStyleRules(
           documentElement as HTMLElement | RRElement,
           head as HTMLElement | RRElement,
@@ -902,15 +903,18 @@
       }
     };
 
-    buildNodeWithSN(mutation.node, {
-      doc: iframeEl.contentDocument! as Document,
-      mirror: mirror as Mirror,
-      hackCss: true,
-      skipChild: false,
-      afterAppend,
-      cache: this.cache,
-    });
-    afterAppend(iframeEl.contentDocument! as Document, mutation.node.id);
+    if (iframeEl.contentDocument) {
+      buildNodeWithSN(mutation.node, {
+        // TODO: this cast is problematic as `iframEl.contentDocument` can be a `RRDocument`
+        doc: iframeEl.contentDocument as Document,
+        mirror: mirror as Mirror,
+        hackCss: true,
+        skipChild: false,
+        afterAppend,
+        cache: this.cache,
+      });
+      afterAppend(iframeEl.contentDocument as Document, mutation.node.id);
+    }
 
     for (const { mutationInQueue, builtNode } of collected) {
       this.attachDocumentToIframe(mutationInQueue, builtNode);
@@ -997,9 +1001,10 @@
    * pause when there are some canvas drawImage args need to be loaded
    */
   private async preloadAllImages(): Promise<void[]> {
-    let beforeLoadState = this.service.state;
+    // TODO `_beforeLoadState` here does not seem to be used?
+    let _beforeLoadState = this.service.state;
     const stateHandler = () => {
-      beforeLoadState = this.service.state;
+      _beforeLoadState = this.service.state;
     };
     this.emitter.on(ReplayerEvents.Start, stateHandler);
     this.emitter.on(ReplayerEvents.Pause, stateHandler);
@@ -1031,9 +1036,10 @@
       const canvas = document.createElement('canvas');
       const ctx = canvas.getContext('2d');
       const imgd = ctx?.createImageData(canvas.width, canvas.height);
-      let d = imgd?.data;
-      d = JSON.parse(data.args[0]) as Uint8ClampedArray;
-      ctx?.putImageData(imgd!, 0, 0);
+      // TODO: `_d` is not being used, unless there are some side-effects
+      let _d = imgd?.data;
+      _d = JSON.parse(data.args[0]) as Uint8ClampedArray;
+      imgd && ctx?.putImageData(imgd, 0, 0);
     }
   }
   private async deserializeAndPreloadCanvasEvents(
@@ -1370,7 +1376,7 @@
     // Only apply virtual dom optimization if the fast-forward process has node mutation. Because the cost of creating a virtual dom tree and executing the diff algorithm is usually higher than directly applying other kind of events.
     if (this.config.useVirtualDom && !this.usingVirtualDom && isSync) {
       this.usingVirtualDom = true;
       buildFromDom(this.iframe.contentDocument!, this.mirror, this.virtualDom);
       // If these legacy missing nodes haven't been resolved, they should be converted to virtual nodes.
       if (Object.keys(this.legacy_missingNodeRetryMap).length) {
         for (const key in this.legacy_missingNodeRetryMap) {
@@ -1487,7 +1493,7 @@
         // If the parent is attached a shadow dom after it's created, it won't have a shadow root.
         if (!hasShadowRoot(parent)) {
           (parent as Element | RRElement).attachShadow({ mode: 'open' });
           parent = (parent as Element | RRElement).shadowRoot! as Node | RRNode;
         } else parent = parent.shadowRoot as Node | RRNode;
       }
 

packages/rrweb/src/utils.ts

@@ -30,7 +30,7 @@
   'now you can use replayer.getMirror() to access the mirror instance of a replayer,' +
   '\r\n' +
   'or you can use record.mirror to access the mirror instance during recording.';
-/** @deprecated */
+/** @deprecated Use `replayer.getMirror()` or `record.mirror` to access mirror instance in their respective environments */
 export let _mirror: DeprecatedMirror = {
   map: {},
   getId() {
@@ -114,7 +114,7 @@
           set(value) {
             // put hooked setter into event loop to avoid of set latency
             setTimeout(() => {
-              d.set!.call(this, value);
+              d.set && d.set.call(this, value);
             }, 0);
             if (original && original.set) {
               original.set.call(this, value);
@@ -127,7 +127,7 @@
 
 // copy from https://github.com/getsentry/sentry-javascript/blob/b2109071975af8bf0316d3b5b38f519bdaf5dc15/packages/utils/src/object.ts
 export function patch(
   source: { [key: string]: any },
   name: string,
   replacement: (...args: unknown[]) => unknown,
 ): () => void {