Automate NPM package releases (#1119)

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "master",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/pre.json

@@ -0,0 +1,13 @@
+{
+  "mode": "pre",
+  "tag": "alpha",
+  "initialVersions": {
+    "rrdom": "0.1.7",
+    "rrdom-nodejs": "0.1.7",
+    "rrweb": "2.0.0-alpha.4",
+    "rrweb-player": "1.0.0-alpha.4",
+    "rrweb-snapshot": "2.0.0-alpha.4",
+    "@rrweb/types": "2.0.0-alpha.4"
+  },
+  "changesets": []
+}

.github/workflows/release.yml

@@ -0,0 +1,38 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - master
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js lts/*
+        uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+
+      - name: Install Dependencies
+        run: yarn
+
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          publish: yarn run release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      # - name: Send a Slack notification if a publish happens
+      #   if: steps.changesets.outputs.published == 'true'
+      #   # You can do something when a publish happens.
+      #   run: my-slack-bot send-notification --message "A new version of ${GITHUB_REPOSITORY} was published!"

package.json

@@ -18,6 +18,7 @@
     "packages/*"
   ],
   "devDependencies": {
+    "@changesets/cli": "^2.26.0",
     "@monorepo-utils/workspaces-to-typescript-project-references": "^2.8.2",
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "@typescript-eslint/parser": "^5.25.0",
@@ -42,7 +43,8 @@
     "repl": "cd packages/rrweb && npm run repl",
     "live-stream": "cd packages/rrweb && yarn live-stream",
     "lint": "yarn run concurrently --success=all -r -m=1 'yarn run markdownlint docs' 'yarn eslint packages/*/src --ext .ts,.tsx,.js,.jsx,.svelte'",
-    "lint:report": "yarn eslint --output-file eslint_report.json --format json packages/*/src --ext .ts,.tsx,.js,.jsx"
+    "lint:report": "yarn eslint --output-file eslint_report.json --format json packages/*/src --ext .ts,.tsx,.js,.jsx",
+    "release": "yarn build:all && changeset publish"
   },
   "resolutions": {
     "**/jsdom/cssom": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz"

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

@@ -36,15 +36,16 @@ export class RRWindow {
 
 export class RRDocument
   extends BaseRRDocumentImpl(RRNode)
-  implements IRRDocument {
+  implements IRRDocument
+{
   readonly nodeName: '#document' = '#document';
   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,
+        document: this as unknown as Document,
-        DOMException: (null as unknown) as new (
+        DOMException: null as unknown as new (
           message?: string,
           name?: string,
         ) => DOMException,
@@ -97,7 +98,7 @@ export class RRDocument
   }
 
   querySelectorAll(selectors: string): RRNode[] {
-    return (this.nwsapi.select(selectors) as unknown) as RRNode[];
+    return this.nwsapi.select(selectors) as unknown as RRNode[];
   }
 
   getElementsByTagName(tagName: string): RRElement[] {
@@ -220,7 +221,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;
+    return this._style as unknown as CSSStyleDeclaration;
   }
 
   attachShadow(_init: ShadowRootInit): RRElement {
@@ -268,14 +269,14 @@ export class RRElement extends BaseRRElementImpl(RRNode) {
   querySelectorAll(selectors: string): RRNode[] {
     const result: RRElement[] = [];
     if (this.ownerDocument !== null) {
-      ((this.ownerDocument as RRDocument).nwsapi.select(
+      (this.ownerDocument as RRDocument).nwsapi.select(
         selectors,
-        (this as unknown) as Element,
+        this as unknown as Element,
         (element) => {
-          if (((element as unknown) as RRElement) !== this)
+          if ((element as unknown as RRElement) !== this)
-            result.push((element as unknown) as RRElement);
+            result.push(element as unknown as RRElement);
         },
-      ) as unknown) as RRNode[];
+      ) as unknown as RRNode[];
     }
     return result;
   }
@@ -393,6 +394,5 @@ interface RRElementTagNameMap {
   video: RRMediaElement;
 }
 
-type RRElementType<
+type RRElementType<K extends keyof HTMLElementTagNameMap> =
-  K extends keyof HTMLElementTagNameMap
+  K extends keyof RRElementTagNameMap ? RRElementTagNameMap[K] : RRElement;
-> = K extends keyof RRElementTagNameMap ? RRElementTagNameMap[K] : RRElement;

packages/rrdom-nodejs/src/polyfill.ts

@@ -51,10 +51,10 @@ export function polyfillRAF() {
     }
   }
 
-  (global as Window &
+  (global as Window & typeof globalThis).requestAnimationFrame =
-    typeof globalThis).requestAnimationFrame = requestAnimationFrame;
+    requestAnimationFrame;
-  (global as Window &
+  (global as Window & typeof globalThis).cancelAnimationFrame =
-    typeof globalThis).cancelAnimationFrame = cancelAnimationFrame;
+    cancelAnimationFrame;
 }
 
 /**
@@ -88,5 +88,5 @@ export function polyfillDocument() {
     rrdom.documentElement!.appendChild(rrdom.createElement('head'));
     rrdom.documentElement!.appendChild(rrdom.createElement('body'));
   })();
-  global.document = (rrdom as unknown) as Document;
+  global.document = rrdom as unknown as Document;
 }

packages/rrdom-nodejs/test/polyfill.test.ts

@@ -26,7 +26,7 @@ describe('polyfill for nodejs', () => {
       polyfillPerformance();
       expect(global.performance).toBe(originalPerformance);
     }
-    const fakePerformance = (jest.fn() as unknown) as Performance;
+    const fakePerformance = jest.fn() as unknown as Performance;
     global.performance = fakePerformance;
     polyfillPerformance();
     expect(global.performance).toEqual(fakePerformance);
@@ -72,9 +72,11 @@ describe('polyfill for nodejs', () => {
   });
 
   it('should not polyfill requestAnimationFrame if it already exists', () => {
-    const fakeRequestAnimationFrame = (jest.fn() as unknown) as typeof global.requestAnimationFrame;
+    const fakeRequestAnimationFrame =
+      jest.fn() as unknown as typeof global.requestAnimationFrame;
     global.requestAnimationFrame = fakeRequestAnimationFrame;
-    const fakeCancelAnimationFrame = (jest.fn() as unknown) as typeof global.cancelAnimationFrame;
+    const fakeCancelAnimationFrame =
+      jest.fn() as unknown as typeof global.cancelAnimationFrame;
     global.cancelAnimationFrame = fakeCancelAnimationFrame;
     polyfillRAF();
     expect(global.requestAnimationFrame).toBe(fakeRequestAnimationFrame);
@@ -91,7 +93,7 @@ describe('polyfill for nodejs', () => {
   });
 
   it('should not polyfill Event type if it already exists', () => {
-    const fakeEvent = (jest.fn() as unknown) as typeof global.Event;
+    const fakeEvent = jest.fn() as unknown as typeof global.Event;
     global.Event = fakeEvent;
     polyfillEvent();
     expect(global.Event).toBe(fakeEvent);
@@ -106,7 +108,7 @@ describe('polyfill for nodejs', () => {
   });
 
   it('should not polyfill Node type if it already exists', () => {
-    const fakeNode = (jest.fn() as unknown) as typeof global.Node;
+    const fakeNode = jest.fn() as unknown as typeof global.Node;
     global.Node = fakeNode;
     polyfillNode();
     expect(global.Node).toBe(fakeNode);
@@ -121,7 +123,7 @@ describe('polyfill for nodejs', () => {
   });
 
   it('should not polyfill document object if it already exists', () => {
-    const fakeDocument = (jest.fn() as unknown) as typeof global.document;
+    const fakeDocument = jest.fn() as unknown as typeof global.document;
     global.document = fakeDocument;
     polyfillDocument();
     expect(global.document).toBe(fakeDocument);

packages/rrdom/src/diff.ts

@@ -301,10 +301,9 @@ function diffAfterUpdatingChildren(
         oldTree.textContent !==
         (newTree as IRRText | IRRComment | IRRCDATASection).data
       )
-        oldTree.textContent = (newTree as
+        oldTree.textContent = (
-          | IRRText
+          newTree as IRRText | IRRComment | IRRCDATASection
-          | IRRComment
+        ).data;
-          | IRRCDATASection).data;
       break;
     }
   }

packages/rrdom/src/document.ts

@@ -195,7 +195,7 @@ export class BaseRRNode implements IRRNode {
 }
 
 export function BaseRRDocumentImpl<
-  RRNode extends ConstrainedConstructor<IRRNode>
+  RRNode extends ConstrainedConstructor<IRRNode>,
 >(RRNodeClass: RRNode) {
   return class BaseRRDocument extends RRNodeClass implements IRRDocument {
     public readonly nodeType: number = NodeType.DOCUMENT_NODE;
@@ -401,13 +401,14 @@ export function BaseRRDocumentImpl<
 }
 
 export function BaseRRDocumentTypeImpl<
-  RRNode extends ConstrainedConstructor<IRRNode>
+  RRNode extends ConstrainedConstructor<IRRNode>,
 >(RRNodeClass: RRNode) {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   return class BaseRRDocumentType
     extends RRNodeClass
-    implements IRRDocumentType {
+    implements IRRDocumentType
+  {
     public readonly nodeType: number = NodeType.DOCUMENT_TYPE_NODE;
     public readonly RRNodeType = RRNodeType.DocumentType;
     public readonly nodeName: string;
@@ -431,7 +432,7 @@ export function BaseRRDocumentTypeImpl<
 }
 
 export function BaseRRElementImpl<
-  RRNode extends ConstrainedConstructor<IRRNode>
+  RRNode extends ConstrainedConstructor<IRRNode>,
 >(RRNodeClass: RRNode) {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
@@ -479,9 +480,9 @@ export function BaseRRElementImpl<
     }
 
     public get style() {
-      const style = (this.attributes.style
+      const style = (
-        ? parseCSSText(this.attributes.style)
+        this.attributes.style ? parseCSSText(this.attributes.style) : {}
-        : {}) as CSSStyleDeclaration;
+      ) as CSSStyleDeclaration;
       const hyphenateRE = /\B([A-Z])/g;
       style.setProperty = (
         name: string,
@@ -583,7 +584,7 @@ export function BaseRRElementImpl<
 }
 
 export function BaseRRMediaElementImpl<
-  RRElement extends ConstrainedConstructor<IRRElement>
+  RRElement extends ConstrainedConstructor<IRRElement>,
 >(RRElementClass: RRElement) {
   return class BaseRRMediaElement extends RRElementClass {
     public currentTime?: number;
@@ -637,7 +638,7 @@ export function BaseRRTextImpl<RRNode extends ConstrainedConstructor<IRRNode>>(
 }
 
 export function BaseRRCommentImpl<
-  RRNode extends ConstrainedConstructor<IRRNode>
+  RRNode extends ConstrainedConstructor<IRRNode>,
 >(RRNodeClass: RRNode) {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
@@ -667,13 +668,14 @@ export function BaseRRCommentImpl<
 }
 
 export function BaseRRCDATASectionImpl<
-  RRNode extends ConstrainedConstructor<IRRNode>
+  RRNode extends ConstrainedConstructor<IRRNode>,
 >(RRNodeClass: RRNode) {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   return class BaseRRCDATASection
     extends RRNodeClass
-    implements IRRCDATASection {
+    implements IRRCDATASection
+  {
     public readonly nodeName: '#cdata-section' = '#cdata-section';
     public readonly nodeType: number = NodeType.CDATA_SECTION_NODE;
     public readonly RRNodeType = RRNodeType.CDATA;

packages/rrdom/src/index.ts

@@ -193,9 +193,8 @@ interface RRElementTagNameMap {
   video: RRMediaElement;
 }
 
-type RRElementType<
+type RRElementType<K extends keyof HTMLElementTagNameMap> =
-  K extends keyof HTMLElementTagNameMap
+  K extends keyof RRElementTagNameMap ? RRElementTagNameMap[K] : RRElement;
-> = K extends keyof RRElementTagNameMap ? RRElementTagNameMap[K] : RRElement;
 
 function getValidTagName(element: HTMLElement): string {
   // https://github.com/rrweb-io/rrweb-snapshot/issues/56

packages/rrdom/test/diff.test.ts

@@ -65,9 +65,11 @@ function createTree(
   type TNode = typeof rrDocument extends RRDocument ? RRNode : Node;
   let root: TNode;
 
-  root = (rrDocument
+  root = (
-    ? rrDocument.createElement(treeNode.tagName)
+    rrDocument
-    : document.createElement(treeNode.tagName)) as TNode;
+      ? rrDocument.createElement(treeNode.tagName)
+      : document.createElement(treeNode.tagName)
+  ) as TNode;
 
   const sn = Object.assign({}, elementSn, {
     tagName: treeNode.tagName,
@@ -75,9 +77,9 @@ function createTree(
   });
 
   if (rrDocument) {
-    rrDocument.mirror.add((root as unknown) as RRNode, sn);
+    rrDocument.mirror.add(root as unknown as RRNode, sn);
   } else {
-    mirror.add((root as unknown) as Node, sn);
+    mirror.add(root as unknown as Node, sn);
   }
 
   if (treeNode.children)
@@ -320,8 +322,8 @@ describe('diff algorithm for rrdom', () => {
 
       rrNode.attributes = { id: 'node1', class: 'node' };
       diff(node, rrNode, replayer);
-      expect(((node as Node) as HTMLElement).id).toBe('node1');
+      expect((node as Node as HTMLElement).id).toBe('node1');
-      expect(((node as Node) as HTMLElement).className).toBe('node');
+      expect((node as Node as HTMLElement).className).toBe('node');
     });
 
     it('can update exist properties', () => {
@@ -330,9 +332,9 @@ describe('diff algorithm for rrdom', () => {
       const sn = Object.assign({}, elementSn, { tagName });
       mirror.add(node, sn);
 
-      ((node as Node) as HTMLElement).id = 'element1';
+      (node as Node as HTMLElement).id = 'element1';
-      ((node as Node) as HTMLElement).className = 'element';
+      (node as Node as HTMLElement).className = 'element';
-      ((node as Node) as HTMLElement).setAttribute('style', 'color: black');
+      (node as Node as HTMLElement).setAttribute('style', 'color: black');
       const rrDocument = new RRDocument();
       const rrNode = rrDocument.createElement(tagName);
       const sn2 = Object.assign({}, elementSn, { tagName });
@@ -340,17 +342,17 @@ describe('diff algorithm for rrdom', () => {
 
       rrNode.attributes = { id: 'node1', class: 'node', style: 'color: white' };
       diff(node, rrNode, replayer);
-      expect(((node as Node) as HTMLElement).id).toBe('node1');
+      expect((node as Node as HTMLElement).id).toBe('node1');
-      expect(((node as Node) as HTMLElement).className).toBe('node');
+      expect((node as Node as HTMLElement).className).toBe('node');
-      expect(((node as Node) as HTMLElement).getAttribute('style')).toBe(
+      expect((node as Node as HTMLElement).getAttribute('style')).toBe(
         'color: white',
       );
 
       rrNode.attributes = { id: 'node2' };
       diff(node, rrNode, replayer);
-      expect(((node as Node) as HTMLElement).id).toBe('node2');
+      expect((node as Node as HTMLElement).id).toBe('node2');
-      expect(((node as Node) as HTMLElement).className).toBe('');
+      expect((node as Node as HTMLElement).className).toBe('');
-      expect(((node as Node) as HTMLElement).getAttribute('style')).toBe(null);
+      expect((node as Node as HTMLElement).getAttribute('style')).toBe(null);
     });
 
     it('can delete old properties', () => {
@@ -359,9 +361,9 @@ describe('diff algorithm for rrdom', () => {
       const sn = Object.assign({}, elementSn, { tagName });
       mirror.add(node, sn);
 
-      ((node as Node) as HTMLElement).id = 'element1';
+      (node as Node as HTMLElement).id = 'element1';
-      ((node as Node) as HTMLElement).className = 'element';
+      (node as Node as HTMLElement).className = 'element';
-      ((node as Node) as HTMLElement).setAttribute('style', 'color: black');
+      (node as Node as HTMLElement).setAttribute('style', 'color: black');
       const rrDocument = new RRDocument();
       const rrNode = rrDocument.createElement(tagName);
       const sn2 = Object.assign({}, elementSn, { tagName });
@@ -369,15 +371,15 @@ describe('diff algorithm for rrdom', () => {
 
       rrNode.attributes = { id: 'node1' };
       diff(node, rrNode, replayer);
-      expect(((node as Node) as HTMLElement).id).toBe('node1');
+      expect((node as Node as HTMLElement).id).toBe('node1');
-      expect(((node as Node) as HTMLElement).className).toBe('');
+      expect((node as Node as HTMLElement).className).toBe('');
-      expect(((node as Node) as HTMLElement).getAttribute('style')).toBe(null);
+      expect((node as Node as HTMLElement).getAttribute('style')).toBe(null);
 
       rrNode.attributes = { src: 'link' };
       diff(node, rrNode, replayer);
-      expect(((node as Node) as HTMLElement).id).toBe('');
+      expect((node as Node as HTMLElement).id).toBe('');
-      expect(((node as Node) as HTMLElement).className).toBe('');
+      expect((node as Node as HTMLElement).className).toBe('');
-      expect(((node as Node) as HTMLElement).getAttribute('src')).toBe('link');
+      expect((node as Node as HTMLElement).getAttribute('src')).toBe('link');
     });
 
     it('can diff scroll positions', () => {
@@ -386,8 +388,8 @@ describe('diff algorithm for rrdom', () => {
       const sn = Object.assign({}, elementSn, { tagName });
       mirror.add(node, sn);
 
-      expect(((node as Node) as HTMLElement).scrollLeft).toEqual(0);
+      expect((node as Node as HTMLElement).scrollLeft).toEqual(0);
-      expect(((node as Node) as HTMLElement).scrollTop).toEqual(0);
+      expect((node as Node as HTMLElement).scrollTop).toEqual(0);
       const rrDocument = new RRDocument();
       const rrNode = rrDocument.createElement(tagName);
       const sn2 = Object.assign({}, elementSn, { tagName });
@@ -396,8 +398,8 @@ describe('diff algorithm for rrdom', () => {
       rrNode.scrollLeft = 100;
       rrNode.scrollTop = 200;
       diff(node, rrNode, replayer);
-      expect(((node as Node) as HTMLElement).scrollLeft).toEqual(100);
+      expect((node as Node as HTMLElement).scrollLeft).toEqual(100);
-      expect(((node as Node) as HTMLElement).scrollTop).toEqual(200);
+      expect((node as Node as HTMLElement).scrollTop).toEqual(200);
     });
 
     it('can diff properties for SVG elements', () => {
@@ -412,9 +414,7 @@ describe('diff algorithm for rrdom', () => {
 
       jest.spyOn(Element.prototype, 'setAttributeNS');
       diff(element, node, replayer);
-      expect(((element as Node) as SVGElement).getAttribute('xmlns')).toBe(
+      expect((element as Node as SVGElement).getAttribute('xmlns')).toBe(value);
-        value,
-      );
       expect(SVGElement.prototype.setAttributeNS).toHaveBeenCalledWith(
         'http://www.w3.org/2000/xmlns/',
         'xmlns',
@@ -464,9 +464,7 @@ describe('diff algorithm for rrdom', () => {
       expect(node.childNodes.length).toEqual(3);
       expect(rrNode.childNodes.length).toEqual(3);
       expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
-        1,
+        1, 2, 3,
-        2,
-        3,
       ]);
     });
 
@@ -494,11 +492,7 @@ describe('diff algorithm for rrdom', () => {
       expect(node.childNodes.length).toEqual(5);
       expect(rrNode.childNodes.length).toEqual(5);
       expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
-        1,
+        1, 2, 3, 4, 5,
-        2,
-        3,
-        4,
-        5,
       ]);
     });
 
@@ -526,11 +520,7 @@ describe('diff algorithm for rrdom', () => {
       expect(node.childNodes.length).toEqual(5);
       expect(rrNode.childNodes.length).toEqual(5);
       expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
-        1,
+        1, 2, 3, 4, 5,
-        2,
-        3,
-        4,
-        5,
       ]);
     });
 
@@ -558,11 +548,7 @@ describe('diff algorithm for rrdom', () => {
       expect(node.childNodes.length).toEqual(5);
       expect(rrNode.childNodes.length).toEqual(5);
       expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
-        1,
+        1, 2, 3, 4, 5,
-        2,
-        3,
-        4,
-        5,
       ]);
     });
 
@@ -589,9 +575,7 @@ describe('diff algorithm for rrdom', () => {
       expect(node.childNodes.length).toEqual(3);
       expect(rrNode.childNodes.length).toEqual(3);
       expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
-        1,
+        1, 2, 3,
-        2,
-        3,
       ]);
     });
 
@@ -631,11 +615,7 @@ describe('diff algorithm for rrdom', () => {
       ) as Node;
       expect(node.childNodes.length).toEqual(5);
       expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
-        1,
+        1, 2, 3, 4, 5,
-        2,
-        3,
-        4,
-        5,
       ]);
       const rrNode = createTree(
         {
@@ -650,9 +630,7 @@ describe('diff algorithm for rrdom', () => {
       expect(node.childNodes.length).toEqual(3);
       expect(rrNode.childNodes.length).toEqual(3);
       expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
-        3,
+        3, 4, 5,
-        4,
-        5,
       ]);
     });
 
@@ -668,11 +646,7 @@ describe('diff algorithm for rrdom', () => {
       ) as Node;
       expect(node.childNodes.length).toEqual(5);
       expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
-        1,
+        1, 2, 3, 4, 5,
-        2,
-        3,
-        4,
-        5,
       ]);
       const rrNode = createTree(
         {
@@ -687,9 +661,7 @@ describe('diff algorithm for rrdom', () => {
       expect(node.childNodes.length).toEqual(3);
       expect(rrNode.childNodes.length).toEqual(3);
       expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
-        1,
+        1, 2, 3,
-        2,
-        3,
       ]);
     });
 
@@ -705,11 +677,7 @@ describe('diff algorithm for rrdom', () => {
       ) as Node;
       expect(node.childNodes.length).toEqual(5);
       expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
-        1,
+        1, 2, 3, 4, 5,
-        2,
-        3,
-        4,
-        5,
       ]);
       const rrNode = createTree(
         {
@@ -724,10 +692,7 @@ describe('diff algorithm for rrdom', () => {
       expect(node.childNodes.length).toEqual(4);
       expect(rrNode.childNodes.length).toEqual(4);
       expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
-        1,
+        1, 2, 4, 5,
-        2,
-        4,
-        5,
       ]);
     });
 
@@ -743,11 +708,7 @@ describe('diff algorithm for rrdom', () => {
       ) as Node;
       expect(node.childNodes.length).toEqual(5);
       expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
-        1,
+        1, 2, 3, 4, 5,
-        2,
-        3,
-        4,
-        5,
       ]);
       const rrNode = createTree(
         {
@@ -762,11 +723,7 @@ describe('diff algorithm for rrdom', () => {
       expect(node.childNodes.length).toEqual(5);
       expect(rrNode.childNodes.length).toEqual(5);
       expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
-        2,
+        2, 3, 4, 1, 5,
-        3,
-        4,
-        1,
-        5,
       ]);
     });
 
@@ -782,9 +739,7 @@ describe('diff algorithm for rrdom', () => {
       ) as Node;
       expect(node.childNodes.length).toEqual(3);
       expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
-        1,
+        1, 2, 3,
-        2,
-        3,
       ]);
       const rrNode = createTree(
         {
@@ -799,9 +754,7 @@ describe('diff algorithm for rrdom', () => {
       expect(node.childNodes.length).toEqual(3);
       expect(rrNode.childNodes.length).toEqual(3);
       expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
-        2,
+        2, 3, 1,
-        3,
-        1,
       ]);
     });
 
@@ -829,10 +782,7 @@ describe('diff algorithm for rrdom', () => {
       expect(node.childNodes.length).toEqual(4);
       expect(rrNode.childNodes.length).toEqual(4);
       expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
-        1,
+        1, 4, 2, 3,
-        4,
-        2,
-        3,
       ]);
     });
 
@@ -860,10 +810,7 @@ describe('diff algorithm for rrdom', () => {
       expect(node.childNodes.length).toEqual(4);
       expect(rrNode.childNodes.length).toEqual(4);
       expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
-        4,
+        4, 2, 3, 1,
-        2,
-        3,
-        1,
       ]);
     });
 
@@ -891,11 +838,7 @@ describe('diff algorithm for rrdom', () => {
       expect(node.childNodes.length).toEqual(5);
       expect(rrNode.childNodes.length).toEqual(5);
       expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
-        4,
+        4, 1, 2, 3, 6,
-        1,
-        2,
-        3,
-        6,
       ]);
     });
 
@@ -923,8 +866,7 @@ describe('diff algorithm for rrdom', () => {
       expect(node.childNodes.length).toEqual(2);
       expect(rrNode.childNodes.length).toEqual(2);
       expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
-        4,
+        4, 6,
-        6,
       ]);
     });
 
@@ -958,14 +900,7 @@ describe('diff algorithm for rrdom', () => {
       expect(node.childNodes.length).toEqual(8);
       expect(rrNode.childNodes.length).toEqual(8);
       expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
-        8,
+        8, 7, 6, 5, 4, 3, 2, 1,
-        7,
-        6,
-        5,
-        4,
-        3,
-        2,
-        1,
       ]);
     });
 
@@ -1131,7 +1066,7 @@ describe('diff algorithm for rrdom', () => {
         id: 1,
       } as serializedNodeWithId);
 
-      expect(((node as Node) as HTMLElement).shadowRoot).toBeNull();
+      expect((node as Node as HTMLElement).shadowRoot).toBeNull();
 
       const rrDocument = new RRDocument();
       const rrNode = rrDocument.createElement(tagName);
@@ -1147,11 +1082,11 @@ describe('diff algorithm for rrdom', () => {
       expect(rrNode.shadowRoot!.childNodes.length).toBe(1);
 
       diff(node, rrNode, replayer, rrDocument.mirror);
-      expect(((node as Node) as HTMLElement).shadowRoot).not.toBeNull();
+      expect((node as Node as HTMLElement).shadowRoot).not.toBeNull();
-      expect(
+      expect((node as Node as HTMLElement).shadowRoot!.childNodes.length).toBe(
-        ((node as Node) as HTMLElement).shadowRoot!.childNodes.length,
+        1,
-      ).toBe(1);
+      );
-      const childElement = ((node as Node) as HTMLElement).shadowRoot!
+      const childElement = (node as Node as HTMLElement).shadowRoot!
         .childNodes[0] as HTMLElement;
       expect(childElement.tagName).toEqual('DIV');
     });
@@ -1623,7 +1558,7 @@ describe('diff algorithm for rrdom', () => {
       let result = createOrGetNode(rrNode, mirror, rrDocument.mirror);
       expect(result).toBeInstanceOf(HTMLElement);
       expect(mirror.getId(result)).toBe(0);
-      expect(((result as Node) as HTMLElement).tagName).toBe('DIV');
+      expect((result as Node as HTMLElement).tagName).toBe('DIV');
     });
 
     it('create a node from RRNode', () => {
@@ -1639,14 +1574,14 @@ describe('diff algorithm for rrdom', () => {
       result = createOrGetNode(rrNode, mirror, rrDocument.mirror);
       expect(result).toBeInstanceOf(Text);
       expect(mirror.getId(result)).toBe(1);
-      expect(((result as Node) as Text).textContent).toBe(textContent);
+      expect((result as Node as Text).textContent).toBe(textContent);
 
       rrNode = rrDocument.createComment(textContent);
       rrDocument.mirror.add(rrNode, getDefaultSN(rrNode, 2));
       result = createOrGetNode(rrNode, mirror, rrDocument.mirror);
       expect(result).toBeInstanceOf(Comment);
       expect(mirror.getId(result)).toBe(2);
-      expect(((result as Node) as Comment).textContent).toBe(textContent);
+      expect((result as Node as Comment).textContent).toBe(textContent);
 
       rrNode = rrDocument.createCDATASection('');
       rrDocument.mirror.add(rrNode, getDefaultSN(rrNode, 3));
@@ -1665,9 +1600,9 @@ describe('diff algorithm for rrdom', () => {
       let result = createOrGetNode(rrNode, mirror, rrDocument.mirror);
       expect(result).toBeInstanceOf(DocumentType);
       expect(mirror.getId(result)).toBe(0);
-      expect(((result as Node) as DocumentType).name).toEqual('html');
+      expect((result as Node as DocumentType).name).toEqual('html');
-      expect(((result as Node) as DocumentType).publicId).toEqual(publicId);
+      expect((result as Node as DocumentType).publicId).toEqual(publicId);
-      expect(((result as Node) as DocumentType).systemId).toEqual('');
+      expect((result as Node as DocumentType).systemId).toEqual('');
     });
 
     it('can get a node if it already exists', () => {
@@ -1687,7 +1622,7 @@ describe('diff algorithm for rrdom', () => {
 
       expect(result).toBeInstanceOf(Text);
       expect(mirror.getId(result)).toBe(0);
-      expect(((result as Node) as Text).textContent).toBe(textContent);
+      expect((result as Node as Text).textContent).toBe(textContent);
       expect(result).toEqual(text);
       // To make sure the existed text node is used.
       expect(mirror.getMeta(result)).toEqual(mirror.getMeta(text));
@@ -1696,7 +1631,7 @@ describe('diff algorithm for rrdom', () => {
 
   describe('apply virtual style rules to node', () => {
     beforeEach(() => {
-      const dummyReplayer = new Replayer(([
+      const dummyReplayer = new Replayer([
         {
           type: EventType.DomContentLoaded,
           timestamp: 0,
@@ -1709,7 +1644,7 @@ describe('diff algorithm for rrdom', () => {
           },
           timestamp: 0,
         },
-      ] as unknown) as eventWithTime[]);
+      ] as unknown as eventWithTime[]);
       replayer.applyStyleSheetMutation = (
         data: styleDeclarationData | styleSheetRuleData,
         styleSheet: CSSStyleSheet,

packages/rrdom/test/document.test.ts

@@ -424,7 +424,7 @@ describe('Basic RRDocument implementation', () => {
       expect(node.removeAttribute).toBeDefined();
       expect(node.attachShadow).toBeDefined();
       expect(node.dispatchEvent).toBeDefined();
-      expect(node.dispatchEvent((null as unknown) as Event)).toBeTruthy();
+      expect(node.dispatchEvent(null as unknown as Event)).toBeTruthy();
       expect(node.toString()).toEqual('DIV id="id" class="className" ');
     });
 

packages/rrdom/test/utils.ts

@@ -1,7 +1,7 @@
 import * as rollup from 'rollup';
 import * as typescript from 'rollup-plugin-typescript2';
 import resolve from '@rollup/plugin-node-resolve';
-const _typescript = (typescript as unknown) as typeof typescript.default;
+const _typescript = typescript as unknown as typeof typescript.default;
 
 /**
  * Use rollup to compile an input TS script into JS code string.
@@ -10,10 +10,10 @@ export async function compileTSCode(inputFilePath: string) {
   const bundle = await rollup.rollup({
     input: inputFilePath,
     plugins: [
-      (resolve() as unknown) as rollup.Plugin,
+      resolve() as unknown as rollup.Plugin,
-      (_typescript({
+      _typescript({
         tsconfigOverride: { compilerOptions: { module: 'ESNext' } },
-      }) as unknown) as rollup.Plugin,
+      }) as unknown as rollup.Plugin,
     ],
   });
   const {

packages/rrdom/test/virtual-dom.test.ts

@@ -98,7 +98,7 @@ describe('RRDocument for browser environment', () => {
       // build from element
       expect(mirror.getMeta(document.documentElement)).toBeNull();
       rrNode = buildFromNode(
-        (document.documentElement as unknown) as Node,
+        document.documentElement as unknown as Node,
         rrdom,
         mirror,
       )!;
@@ -378,7 +378,7 @@ describe('RRDocument for browser environment', () => {
         expect(dom.mirror.getId(node1)).toEqual(0);
         const node2 = dom.createTextNode('text');
         expect(dom.mirror.getId(node2)).toEqual(-1);
-        expect(dom.mirror.getId((null as unknown) as RRNode)).toEqual(-1);
+        expect(dom.mirror.getId(null as unknown as RRNode)).toEqual(-1);
       });
 
       it('has() should return whether the mirror has an ID', () => {

packages/rrweb-snapshot/src/rebuild.ts

@@ -267,8 +267,8 @@ function buildNode(
             rr_dataURL: string;
           };
           // If the canvas element is created in RRDom runtime (seeking to a time point), the canvas context isn't supported. So the data has to be stored and not handled until diff process. https://github.com/rrweb-io/rrweb/pull/944
-          if (((node as unknown) as RRCanvasElement).RRNodeType)
+          if ((node as unknown as RRCanvasElement).RRNodeType)
-            ((node as unknown) as RRCanvasElement).rr_dataURL = value.toString();
+            (node as unknown as RRCanvasElement).rr_dataURL = value.toString();
         } else if (tagName === 'img' && name === 'rr_dataURL') {
           const image = node as HTMLImageElement;
           if (!image.currentSrc.startsWith('data:')) {

packages/rrweb-snapshot/src/utils.ts

@@ -110,7 +110,7 @@ export class Mirror implements IMirror<Node> {
 
     if (n.childNodes) {
       n.childNodes.forEach((childNode) =>
-        this.removeNodeFromMap((childNode as unknown) as Node),
+        this.removeNodeFromMap(childNode as unknown as Node),
       );
     }
   }

packages/rrweb-snapshot/test/integration.test.ts

@@ -8,7 +8,7 @@ import * as typescript from 'rollup-plugin-typescript2';
 import * as assert from 'assert';
 import { waitForRAF } from './utils';
 
-const _typescript = (typescript as unknown) as () => rollup.Plugin;
+const _typescript = typescript as unknown as () => rollup.Plugin;
 
 const htmlFolder = path.join(__dirname, 'html');
 const htmls = fs.readdirSync(htmlFolder).map((filePath) => {
@@ -129,7 +129,8 @@ describe('integration tests', function (this: ISuite) {
         });
       }
       await waitForRAF(page);
-      const rebuildHtml = ((await page.evaluate(`${code}
+      const rebuildHtml = (
+        (await page.evaluate(`${code}
         const x = new XMLSerializer();
         const snap = rrweb.snapshot(document);
         let out = x.serializeToString(rrweb.rebuild(snap, { doc: document }));
@@ -138,7 +139,8 @@ describe('integration tests', function (this: ISuite) {
           out = out.replace(' xmlns=\"http://www.w3.org/1999/xhtml\"', '');
         }
         out;  // return
-      `)) as string)
+      `)) as string
+      )
         .replace(/\n\n/g, '')
         .replace(
           /blob:http:\/\/localhost:\d+\/[0-9a-z\-]+/,

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

@@ -90,9 +90,9 @@ function initLogObserver(
   win: IWindow, // top window or in an iframe
   options: LogRecordOptions,
 ): listenerHandler {
-  const logOptions = (options
+  const logOptions = (
-    ? Object.assign({}, defaultLogOptions, options)
+    options ? Object.assign({}, defaultLogOptions, options) : defaultLogOptions
-    : defaultLogOptions) as {
+  ) as {
     level: LogLevel[];
     lengthThreshold: number;
     stringifyOptions?: StringifyOptions;
@@ -117,9 +117,9 @@ function initLogObserver(
     const errorHandler = (event: ErrorEvent) => {
       const message = event.message,
         error = event.error as Error;
-      const trace: string[] = ErrorStackParser.parse(
+      const trace: string[] = ErrorStackParser.parse(error).map(
-        error,
+        (stackFrame: StackFrame) => stackFrame.toString(),
-      ).map((stackFrame: StackFrame) => stackFrame.toString());
+      );
       const payload = [stringify(message, logOptions.stringifyOptions)];
       cb({
         level: 'error',
@@ -149,9 +149,9 @@ function initLogObserver(
           stringify(event.reason, logOptions.stringifyOptions),
         ];
       }
-      const trace: string[] = ErrorStackParser.parse(
+      const trace: string[] = ErrorStackParser.parse(error).map(
-        error,
+        (stackFrame: StackFrame) => stackFrame.toString(),
-      ).map((stackFrame: StackFrame) => stackFrame.toString());
+      );
       cb({
         level: 'error',
         trace,

packages/rrweb/src/plugins/console/record/stringify.ts

@@ -123,7 +123,7 @@ export function stringify(
       if (value instanceof Event) {
         const eventResult: Record<string, unknown> = {};
         for (const eventKey in value) {
-          const eventValue = ((value as unknown) as Record<string, unknown>)[
+          const eventValue = (value as unknown as Record<string, unknown>)[
             eventKey
           ];
           if (Array.isArray(eventValue)) {

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

@@ -59,10 +59,10 @@ class LogReplayPlugin {
     for (const level of this.config.level!) {
       if (level === 'trace') {
         replayLogger[level] = (data: LogData) => {
-          const logger = ((console.log as unknown) as PatchedConsoleLog)[
+          const logger = (console.log as unknown as PatchedConsoleLog)[
             ORIGINAL_ATTRIBUTE_NAME
           ]
-            ? ((console.log as unknown) as PatchedConsoleLog)[
+            ? (console.log as unknown as PatchedConsoleLog)[
                 ORIGINAL_ATTRIBUTE_NAME
               ]
             : console.log;
@@ -73,10 +73,10 @@ class LogReplayPlugin {
         };
       } else {
         replayLogger[level] = (data: LogData) => {
-          const logger = ((console[level] as unknown) as PatchedConsoleLog)[
+          const logger = (console[level] as unknown as PatchedConsoleLog)[
             ORIGINAL_ATTRIBUTE_NAME
           ]
-            ? ((console[level] as unknown) as PatchedConsoleLog)[
+            ? (console[level] as unknown as PatchedConsoleLog)[
                 ORIGINAL_ATTRIBUTE_NAME
               ]
             : console[level];
@@ -118,7 +118,7 @@ export const getReplayConsolePlugin: (
         event.type === EventType.IncrementalSnapshot &&
         event.data.source === (IncrementalSource.Log as IncrementalSource)
       ) {
-        logData = (event.data as unknown) as LogData;
+        logData = event.data as unknown as LogData;
       } else if (
         event.type === EventType.Plugin &&
         event.data.plugin === PLUGIN_NAME

packages/rrweb/src/plugins/sequential-id/replay/index.ts

@@ -22,7 +22,7 @@ export const getReplaySequentialIdPlugin: (
   return {
     handler(event: eventWithTime) {
       if (key in event) {
-        const id = ((event as unknown) as Record<string, number>)[key];
+        const id = (event as unknown as Record<string, number>)[key];
         if (id !== currentId) {
           console.error(
             `[sequential-id-plugin]: expect to get an id with value "${currentId}", but got "${id}"`,

packages/rrweb/src/record/cross-origin-iframe-mirror.ts

@@ -1,6 +1,7 @@
 import type { ICrossOriginIframeMirror } from '@rrweb/types';
 export default class CrossOriginIframeMirror
-  implements ICrossOriginIframeMirror {
+  implements ICrossOriginIframeMirror
+{
   private iframeIdToRemoteIdMap: WeakMap<
     HTMLIFrameElement,
     Map<number, number>

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

@@ -8,16 +8,12 @@ import type { StylesheetManager } from './stylesheet-manager';
 
 export class IframeManager {
   private iframes: WeakMap<HTMLIFrameElement, true> = new WeakMap();
-  private crossOriginIframeMap: WeakMap<
+  private crossOriginIframeMap: WeakMap<MessageEventSource, HTMLIFrameElement> =
-    MessageEventSource,
+    new WeakMap();
-    HTMLIFrameElement
-  > = new WeakMap();
   public crossOriginIframeMirror = new CrossOriginIframeMirror(genId);
   public crossOriginIframeStyleMirror: CrossOriginIframeMirror;
-  public crossOriginIframeRootIdMap: WeakMap<
+  public crossOriginIframeRootIdMap: WeakMap<HTMLIFrameElement, number> =
-    HTMLIFrameElement,
+    new WeakMap();
-    number
-  > = new WeakMap();
   private mirror: Mirror;
   private mutationCb: mutationCallBack;
   private wrappedEmit: (e: eventWithTime, isCheckout?: boolean) => void;

packages/rrweb/src/record/index.ts

@@ -173,9 +173,9 @@ function record<T = eventWithTime>(
       // Disable packing events which will be emitted to parent frames.
       !passEmitsToParent
     ) {
-      e = (packFn(e) as unknown) as eventWithTime;
+      e = packFn(e) as unknown as eventWithTime;
     }
-    return (e as unknown) as T;
+    return e as unknown as T;
   };
   wrappedEmit = (e: eventWithTime, isCheckout?: boolean) => {
     if (

packages/rrweb/src/record/mutation.ts

@@ -180,29 +180,31 @@ export default class MutationBuffer {
   private processedNodeManager: observerParam['processedNodeManager'];
 
   public init(options: MutationBufferParam) {
-    ([
+    (
-      'mutationCb',
+      [
-      'blockClass',
+        'mutationCb',
-      'blockSelector',
+        'blockClass',
-      'maskTextClass',
+        'blockSelector',
-      'maskTextSelector',
+        'maskTextClass',
-      'inlineStylesheet',
+        'maskTextSelector',
-      'maskInputOptions',
+        'inlineStylesheet',
-      'maskTextFn',
+        'maskInputOptions',
-      'maskInputFn',
+        'maskTextFn',
-      'keepIframeSrcFn',
+        'maskInputFn',
-      'recordCanvas',
+        'keepIframeSrcFn',
-      'inlineImages',
+        'recordCanvas',
-      'slimDOMOptions',
+        'inlineImages',
-      'dataURLOptions',
+        'slimDOMOptions',
-      'doc',
+        'dataURLOptions',
-      'mirror',
+        'doc',
-      'iframeManager',
+        'mirror',
-      'stylesheetManager',
+        'iframeManager',
-      'shadowDomManager',
+        'stylesheetManager',
-      'canvasManager',
+        'shadowDomManager',
-      'processedNodeManager',
+        'canvasManager',
-    ] as const).forEach((key) => {
+        'processedNodeManager',
+      ] as const
+    ).forEach((key) => {
       // just a type trick, the runtime result is correct
       this[key] = options[key] as never;
     });

packages/rrweb/src/record/observer.ts

@@ -94,19 +94,18 @@ export function initMutationObserver(
      * window.__rrMutationObserver = MutationObserver
      */
     (window as WindowWithStoredMutationObserver).__rrMutationObserver;
-  const angularZoneSymbol = (window as WindowWithAngularZone)?.Zone?.__symbol__?.(
+  const angularZoneSymbol = (
-    'MutationObserver',
+    window as WindowWithAngularZone
-  );
+  )?.Zone?.__symbol__?.('MutationObserver');
   if (
     angularZoneSymbol &&
-    ((window as unknown) as Record<string, typeof MutationObserver>)[
+    (window as unknown as Record<string, typeof MutationObserver>)[
       angularZoneSymbol
     ]
   ) {
-    mutationObserverCtor = ((window as unknown) as Record<
+    mutationObserverCtor = (
-      string,
+      window as unknown as Record<string, typeof MutationObserver>
-      typeof MutationObserver
+    )[angularZoneSymbol];
-    >)[angularZoneSymbol];
   }
   const observer = new (mutationObserverCtor as new (
     callback: MutationCallback,
@@ -423,9 +422,9 @@ function initInputObserver({
     }
   }
   const events = sampling.input === 'last' ? ['change'] : ['input', 'change'];
-  const handlers: Array<
+  const handlers: Array<listenerHandler | hookResetter> = events.map(
-    listenerHandler | hookResetter
+    (eventName) => on(eventName, eventHandler, doc),
-  > = events.map((eventName) => on(eventName, eventHandler, doc));
+  );
   const currentWindow = doc.defaultView;
   if (!currentWindow) {
     return () => {
@@ -891,12 +890,8 @@ function initMediaInteractionObserver({
       ) {
         return;
       }
-      const {
+      const { currentTime, volume, muted, playbackRate } =
-        currentTime,
+        target as HTMLMediaElement;
-        volume,
-        muted,
-        playbackRate,
-      } = target as HTMLMediaElement;
       mediaInteractionCb({
         type,
         id: mirror.getId(target as Node),
@@ -931,7 +926,7 @@ function initFontObserver({ fontCb, doc }: observerParam): listenerHandler {
   const fontMap = new WeakMap<FontFace, fontParam>();
 
   const originalFontFace = win.FontFace;
-  win.FontFace = (function FontFace(
+  win.FontFace = function FontFace(
     family: string,
     source: string | ArrayBufferLike,
     descriptors?: FontFaceDescriptors,
@@ -947,7 +942,7 @@ function initFontObserver({ fontCb, doc }: observerParam): listenerHandler {
           : JSON.stringify(Array.from(new Uint8Array(source))),
     });
     return fontFace;
-  } as unknown) as typeof FontFace;
+  } as unknown as typeof FontFace;
 
   const restoreHandler = patch(
     doc.fonts,

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

@@ -116,7 +116,8 @@ export class CanvasManager {
       blockSelector,
     );
     const snapshotInProgressMap: Map<number, boolean> = new Map();
-    const worker = new ImageBitmapDataURLWorker() as ImageBitmapDataURLRequestWorker;
+    const worker =
+      new ImageBitmapDataURLWorker() as ImageBitmapDataURLRequestWorker;
     worker.onmessage = (e) => {
       const { id } = e.data;
       snapshotInProgressMap.set(id, false);

packages/rrweb/src/record/shadow-dom-manager.ts

@@ -81,7 +81,7 @@ export class ShadowDomManager {
       scrollCb: this.scrollCb,
       // https://gist.github.com/praveenpuglia/0832da687ed5a5d7a0907046c9ef1813
       // scroll is not allowed to pass the boundary, so we need to listen the shadow document
-      doc: (shadowRoot as unknown) as Document,
+      doc: shadowRoot as unknown as Document,
       mirror: this.mirror,
     });
     // Defer this to avoid adoptedStyleSheet events being created before the full snapshot is created or attachShadow action is recorded.
@@ -113,9 +113,11 @@ export class ShadowDomManager {
       const manager = this;
       this.restorePatches.push(
         patch(
-          (iframeElement.contentWindow as Window & {
+          (
-            HTMLElement: { prototype: HTMLElement };
+            iframeElement.contentWindow as Window & {
-          }).HTMLElement.prototype,
+              HTMLElement: { prototype: HTMLElement };
+            }
+          ).HTMLElement.prototype,
           'attachShadow',
           function (original: (init: ShadowRootInit) => ShadowRoot) {
             return function (this: HTMLElement, option: ShadowRootInit) {

packages/rrweb/src/replay/canvas/2d.ts

@@ -20,7 +20,7 @@ export default async function canvasMutation({
 
     if (mutation.setter) {
       // skip some read-only type checks
-      ((ctx as unknown) as Record<string, unknown>)[mutation.property] =
+      (ctx as unknown as Record<string, unknown>)[mutation.property] =
         mutation.args[0];
       return;
     }

packages/rrweb/src/replay/index.ts

@@ -434,9 +434,10 @@ export class Replayer {
 
   public getMetaData(): playerMetaData {
     const firstEvent = this.service.state.context.events[0];
-    const lastEvent = this.service.state.context.events[
+    const lastEvent =
-      this.service.state.context.events.length - 1
+      this.service.state.context.events[
-    ];
+        this.service.state.context.events.length - 1
+      ];
     return {
       startTime: firstEvent.timestamp,
       endTime: lastEvent.timestamp,
@@ -855,7 +856,7 @@ export class Replayer {
     const collected: AppendedIframe[] = [];
     const afterAppend = (builtNode: Node, id: number) => {
       this.collectIframeAndAttachDocument(collected, builtNode);
-      const sn = (mirror as TMirror).getMeta((builtNode as unknown) as TNode);
+      const sn = (mirror as TMirror).getMeta(builtNode as unknown as TNode);
       if (
         sn?.type === NodeType.Element &&
         sn?.tagName.toUpperCase() === 'HTML'
@@ -1263,9 +1264,9 @@ export class Replayer {
         if (this.usingVirtualDom) {
           if (d.styleId) this.constructedStyleMutations.push(d);
           else if (d.id)
-            (this.virtualDom.mirror.getNode(
+            (
-              d.id,
+              this.virtualDom.mirror.getNode(d.id) as RRStyleElement | null
-            ) as RRStyleElement | null)?.rules.push(d);
+            )?.rules.push(d);
         } else this.applyStyleSheetMutation(d);
         break;
       }
@@ -1916,10 +1917,10 @@ export class Replayer {
     styleSheet: CSSStyleSheet,
   ) {
     if (data.set) {
-      const rule = (getNestedRule(
+      const rule = getNestedRule(
         styleSheet.rules,
         data.index,
-      ) as unknown) as CSSStyleRule;
+      ) as unknown as CSSStyleRule;
       rule.style.setProperty(
         data.set.property,
         data.set.value,
@@ -1928,10 +1929,10 @@ export class Replayer {
     }
 
     if (data.remove) {
-      const rule = (getNestedRule(
+      const rule = getNestedRule(
         styleSheet.rules,
         data.index,
-      ) as unknown) as CSSStyleRule;
+      ) as unknown as CSSStyleRule;
       rule.style.removeProperty(data.remove.property);
     }
   }
@@ -1977,7 +1978,8 @@ export class Replayer {
         .filter((style) => style !== null) as CSSStyleSheet[];
       if (hasShadowRoot(targetHost))
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        (targetHost as HTMLElement).shadowRoot!.adoptedStyleSheets = stylesToAdopt;
+        (targetHost as HTMLElement).shadowRoot!.adoptedStyleSheets =
+          stylesToAdopt;
       else if (targetHost.nodeName === '#document')
         (targetHost as Document).adoptedStyleSheets = stylesToAdopt;
 

packages/rrweb/src/types.ts

@@ -209,4 +209,5 @@ export type CrossOriginIframeMessageEventContent<T = eventWithTime> = {
   origin: string;
   isCheckout?: boolean;
 };
-export type CrossOriginIframeMessageEvent = MessageEvent<CrossOriginIframeMessageEventContent>;
+export type CrossOriginIframeMessageEvent =
+  MessageEvent<CrossOriginIframeMessageEventContent>;

packages/rrweb/src/utils.ts

@@ -281,14 +281,14 @@ export function isTouchEvent(
 export function polyfill(win = window) {
   if ('NodeList' in win && !win.NodeList.prototype.forEach) {
     // eslint-disable-next-line @typescript-eslint/unbound-method
-    win.NodeList.prototype.forEach = (Array.prototype
+    win.NodeList.prototype.forEach = Array.prototype
-      .forEach as unknown) as NodeList['forEach'];
+      .forEach as unknown as NodeList['forEach'];
   }
 
   if ('DOMTokenList' in win && !win.DOMTokenList.prototype.forEach) {
     // eslint-disable-next-line @typescript-eslint/unbound-method
-    win.DOMTokenList.prototype.forEach = (Array.prototype
+    win.DOMTokenList.prototype.forEach = Array.prototype
-      .forEach as unknown) as DOMTokenList['forEach'];
+      .forEach as unknown as DOMTokenList['forEach'];
   }
 
   // https://github.com/Financial-Times/polyfill-service/pull/183
@@ -433,7 +433,7 @@ export function getBaseDimension(
 export function hasShadowRoot<T extends Node | RRNode>(
   n: T,
 ): n is T & { shadowRoot: ShadowRoot } {
-  return Boolean(((n as unknown) as Element)?.shadowRoot);
+  return Boolean((n as unknown as Element)?.shadowRoot);
 }
 
 export function getNestedRule(

packages/rrweb/test/events/style-sheet-rule-events.ts

@@ -147,8 +147,7 @@ const events: eventWithTime[] = [
       id: 101,
       adds: [
         {
-          rule:
+          rule: '.css-added-at-500-overwritten-at-3000 {border: 1px solid blue;}',
-            '.css-added-at-500-overwritten-at-3000 {border: 1px solid blue;}',
           index: 1,
         },
       ],
@@ -163,8 +162,7 @@ const events: eventWithTime[] = [
       id: 105,
       adds: [
         {
-          rule:
+          rule: '.css-added-at-1000-deleted-at-2500{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-width:60rem;min-height:100vh;color:blue;}',
-            '.css-added-at-1000-deleted-at-2500{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-width:60rem;min-height:100vh;color:blue;}',
           index: 2,
         },
       ],

packages/rrweb/test/integration.test.ts

@@ -502,7 +502,8 @@ describe('record integration tests', function (this: ISuite) {
     await page.goto('about:blank');
     await page.setContent(
       getHtml('log.html', {
-        plugins: ('[rrwebConsoleRecord.getRecordConsolePlugin()]' as unknown) as RecordPlugin<unknown>[],
+        plugins:
+          '[rrwebConsoleRecord.getRecordConsolePlugin()]' as unknown as RecordPlugin<unknown>[],
       }),
     );
 
@@ -790,8 +791,8 @@ describe('record integration tests', function (this: ISuite) {
 
     await page.evaluate(() => {
       // get contentDocument of iframe five
-      const contentDocument1 = document.querySelector('iframe')!
+      const contentDocument1 =
-        .contentDocument!;
+        document.querySelector('iframe')!.contentDocument!;
       // create shadow dom #1
       contentDocument1.body.attachShadow({ mode: 'open' });
       contentDocument1.body.shadowRoot!.appendChild(

packages/rrweb/test/packer.test.ts

@@ -17,7 +17,7 @@ describe('pack', () => {
 
 describe('unpack', () => {
   it('is compatible with unpacked data 1', () => {
-    const result = unpack((event as unknown) as string);
+    const result = unpack(event as unknown as string);
     expect(result).toEqual(event);
   });
 

packages/rrweb/test/record.test.ts

@@ -96,9 +96,9 @@ describe('record', function (this: ISuite) {
 
   it('will only have one full snapshot without checkout config', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
     });
     let count = 30;
@@ -120,9 +120,9 @@ describe('record', function (this: ISuite) {
 
   it('can checkout full snapshot by count', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
         checkoutEveryNth: 10,
       });
     });
@@ -149,9 +149,9 @@ describe('record', function (this: ISuite) {
 
   it('can checkout full snapshot by time', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
         checkoutEveryNms: 500,
       });
     });
@@ -182,9 +182,9 @@ describe('record', function (this: ISuite) {
 
   it('is safe to checkout during async callbacks', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
         checkoutEveryNth: 2,
       });
       const p = document.createElement('p');
@@ -208,9 +208,9 @@ describe('record', function (this: ISuite) {
 
   it('should record scroll position', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
       const p = document.createElement('p');
       p.innerText = 'testtesttesttesttesttesttesttesttesttest';
@@ -225,9 +225,9 @@ describe('record', function (this: ISuite) {
 
   it('should record selection event', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
       const startNode = document.createElement('p');
 
@@ -266,9 +266,9 @@ describe('record', function (this: ISuite) {
 
   it('can add custom event', async () => {
     await ctx.page.evaluate(() => {
-      const { record, addCustomEvent } = ((window as unknown) as IWindow).rrweb;
+      const { record, addCustomEvent } = (window as unknown as IWindow).rrweb;
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
       addCustomEvent<number>('tag1', 1);
       addCustomEvent<{ a: string }>('tag2', {
@@ -281,10 +281,10 @@ describe('record', function (this: ISuite) {
 
   it('captures stylesheet rules', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
 
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
 
       const styleElement = document.createElement('style');
@@ -331,10 +331,10 @@ describe('record', function (this: ISuite) {
 
   const captureNestedStylesheetRulesTest = async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
 
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
 
       const styleElement = document.createElement('style');
@@ -392,10 +392,10 @@ describe('record', function (this: ISuite) {
 
   it('captures style property changes', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
 
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
         ignoreCSSAttributes: new Set(['color']),
       });
 
@@ -428,7 +428,7 @@ describe('record', function (this: ISuite) {
 
   it('captures inserted style text nodes correctly', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
 
       const styleEl = document.createElement(`style`);
       styleEl.append(document.createTextNode('div { color: red; }'));
@@ -436,7 +436,7 @@ describe('record', function (this: ISuite) {
       document.head.appendChild(styleEl);
 
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
 
       styleEl.append(document.createTextNode('span { color: orange; }'));
@@ -462,11 +462,11 @@ describe('record', function (this: ISuite) {
     });
     await waitForRAF(ctx.page);
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
 
       record({
         inlineStylesheet: true,
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
     });
     await waitForRAF(ctx.page);
@@ -487,14 +487,15 @@ describe('record', function (this: ISuite) {
         document.adoptedStyleSheets = [sheet];
 
         const iframe = document.querySelector('iframe');
-        const sheet2 = new (iframe!.contentWindow! as Window &
+        const sheet2 = new (
-          typeof globalThis).CSSStyleSheet();
+          iframe!.contentWindow! as Window & typeof globalThis
+        ).CSSStyleSheet();
 
         // Add stylesheet to an IFrame document.
         iframe!.contentDocument!.adoptedStyleSheets = [sheet2];
         iframe!.contentDocument!.body.innerHTML = '<h1>h1 in iframe</h1>';
 
-        const { rrweb, emit } = (window as unknown) as IWindow;
+        const { rrweb, emit } = window as unknown as IWindow;
         rrweb.record({
           emit,
         });
@@ -568,7 +569,7 @@ describe('record', function (this: ISuite) {
       sheet2.replaceSync!('div {font-size: large;}');
       shadowHost.shadowRoot!.adoptedStyleSheets = [sheet2];
 
-      const { rrweb, emit } = (window as unknown) as IWindow;
+      const { rrweb, emit } = window as unknown as IWindow;
       rrweb.record({
         emit,
       });
@@ -602,7 +603,7 @@ describe('record', function (this: ISuite) {
         sheet.replaceSync!('h1 {color: blue;}');
         shadowHost.shadowRoot!.adoptedStyleSheets = [sheet];
 
-        const { rrweb, emit } = (window as unknown) as IWindow;
+        const { rrweb, emit } = window as unknown as IWindow;
         rrweb.record({
           emit,
         });
@@ -639,11 +640,11 @@ describe('record', function (this: ISuite) {
     });
     await waitForRAF(ctx.page);
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
 
       record({
         inlineStylesheet: true,
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
     });
     await waitForRAF(ctx.page);
@@ -683,11 +684,11 @@ describe('record', function (this: ISuite) {
 
     it('captures stylesheets that are still loading', async () => {
       ctx.page.evaluate((serverURL) => {
-        const { record } = ((window as unknown) as IWindow).rrweb;
+        const { record } = (window as unknown as IWindow).rrweb;
 
         record({
           inlineStylesheet: true,
-          emit: ((window as unknown) as IWindow).emit,
+          emit: (window as unknown as IWindow).emit,
         });
 
         const link1 = document.createElement('link');
@@ -708,11 +709,11 @@ describe('record', function (this: ISuite) {
         iframe.setAttribute('src', `/html/hello-world.html?2`);
         document.body.appendChild(iframe);
 
-        const { record } = ((window as unknown) as IWindow).rrweb;
+        const { record } = (window as unknown as IWindow).rrweb;
 
         record({
           inlineStylesheet: true,
-          emit: ((window as unknown) as IWindow).emit,
+          emit: (window as unknown as IWindow).emit,
         });
       });
 
@@ -743,11 +744,11 @@ describe('record', function (this: ISuite) {
 
     // do not `await` the following function, otherwise `waitForResponse` _might_ not be called
     void ctx.page.evaluate((corsStylesheetURL) => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
 
       record({
         inlineStylesheet: true,
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
 
       const link1 = document.createElement('link');
@@ -793,8 +794,9 @@ describe('record', function (this: ISuite) {
 
         // Add stylesheet to an IFrame document.
         const iframe = document.querySelector('iframe');
-        const sheet3 = new (iframe!.contentWindow! as IWindow &
+        const sheet3 = new (
-          typeof globalThis).CSSStyleSheet();
+          iframe!.contentWindow! as IWindow & typeof globalThis
+        ).CSSStyleSheet();
         sheet3.replaceSync!('h1 { color: blue; }');
 
         iframe!.contentDocument!.adoptedStyleSheets = [sheet3];
@@ -803,8 +805,8 @@ describe('record', function (this: ISuite) {
         ele.innerText = 'h1 in iframe';
         iframe!.contentDocument!.body.appendChild(ele);
 
-        ((window as unknown) as IWindow).rrweb.record({
+        (window as unknown as IWindow).rrweb.record({
-          emit: ((window.top as unknown) as IWindow).emit,
+          emit: (window.top as unknown as IWindow).emit,
         });
 
         // Make incremental changes to shadow dom.
@@ -819,8 +821,9 @@ describe('record', function (this: ISuite) {
 
           document.adoptedStyleSheets = [sheet4, sheet, sheet2];
 
-          const sheet5 = new (iframe!.contentWindow! as IWindow &
+          const sheet5 = new (
-            typeof globalThis).CSSStyleSheet();
+            iframe!.contentWindow! as IWindow & typeof globalThis
+          ).CSSStyleSheet();
           sheet5.replaceSync!('h2 { color: purple; }');
           iframe!.contentDocument!.adoptedStyleSheets = [sheet5, sheet3];
         }, 10);
@@ -853,9 +856,9 @@ describe('record iframes', function (this: ISuite) {
 
   it('captures iframe content in correct order', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
       record({
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
     });
     await waitForRAF(ctx.page);
@@ -877,10 +880,10 @@ describe('record iframes', function (this: ISuite) {
 
   it('captures stylesheet mutations in iframes', async () => {
     await ctx.page.evaluate(() => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
       record({
         // need to reference window.top for when we are in an iframe!
-        emit: ((window.top as unknown) as IWindow).emit,
+        emit: (window.top as unknown as IWindow).emit,
       });
 
       const iframe = document.querySelector('iframe');

packages/rrweb/test/record/cross-origin-iframes.test.ts

@@ -51,14 +51,14 @@ async function injectRecordScript(
   });
   options = options || {};
   await frame.evaluate((options) => {
-    ((window as unknown) as IWindow).snapshots = [];
+    (window as unknown as IWindow).snapshots = [];
-    const { record, pack } = ((window as unknown) as IWindow).rrweb;
+    const { record, pack } = (window as unknown as IWindow).rrweb;
     const config: recordOptions<eventWithTime> = {
       recordCrossOriginIframes: true,
       recordCanvas: true,
       emit(event) {
-        ((window as unknown) as IWindow).snapshots.push(event);
+        (window as unknown as IWindow).snapshots.push(event);
-        ((window as unknown) as IWindow).emit(event);
+        (window as unknown as IWindow).emit(event);
       },
     };
     if (options.usePackFn) {
@@ -148,21 +148,21 @@ describe('cross origin iframes', function (this: ISuite) {
 
       const frame = await el.contentFrame();
       const events = await frame?.evaluate(
-        () => ((window as unknown) as IWindow).snapshots,
+        () => (window as unknown as IWindow).snapshots,
       );
       expect(events).toMatchObject([]);
     });
 
     it('will emit events if it is in the top level iframe', async () => {
       const events = await ctx.page.evaluate(
-        () => ((window as unknown) as IWindow).snapshots,
+        () => (window as unknown as IWindow).snapshots,
       );
       expect(events.length).not.toBe(0);
     });
 
     it('should emit contents of iframe', async () => {
       const events = await ctx.page.evaluate(
-        () => ((window as unknown) as IWindow).snapshots,
+        () => (window as unknown as IWindow).snapshots,
       );
       await waitForRAF(ctx.page);
       // two events (full snapshot + meta) from main frame, and one full snapshot from iframe
@@ -171,7 +171,7 @@ describe('cross origin iframes', function (this: ISuite) {
 
     it('should emit full snapshot event from iframe as mutation event', async () => {
       const events = await ctx.page.evaluate(
-        () => ((window as unknown) as IWindow).snapshots,
+        () => (window as unknown as IWindow).snapshots,
       );
       await waitForRAF(ctx.page);
       // two events from main frame, and two from iframe
@@ -193,7 +193,7 @@ describe('cross origin iframes', function (this: ISuite) {
 
     it('should use unique id for child of iframes', async () => {
       const events: eventWithTime[] = await ctx.page.evaluate(
-        () => ((window as unknown) as IWindow).snapshots,
+        () => (window as unknown as IWindow).snapshots,
       );
       await waitForRAF(ctx.page);
       expect(
@@ -211,7 +211,7 @@ describe('cross origin iframes', function (this: ISuite) {
       await injectRecordScript(ctx.page.mainFrame().childFrames()[0]); // injects script into new iframe
 
       const events: eventWithTime[] = await ctx.page.evaluate(
-        () => ((window as unknown) as IWindow).snapshots,
+        () => (window as unknown as IWindow).snapshots,
       );
       expect(
         (events[events.length - 1].data as mutationData).removes,
@@ -343,7 +343,7 @@ describe('cross origin iframes', function (this: ISuite) {
     it('should record custom events', async () => {
       const frame = ctx.page.mainFrame().childFrames()[0];
       await frame.evaluate(() => {
-        ((window as unknown) as IWindow).rrweb.addCustomEvent('test', {
+        (window as unknown as IWindow).rrweb.addCustomEvent('test', {
           id: 1,
           parentId: 1,
           nextId: 2,
@@ -388,18 +388,17 @@ describe('cross origin iframes', function (this: ISuite) {
       });
       await waitForRAF(ctx.page);
       await ctx.page.evaluate(() => {
-        (document.adoptedStyleSheets![0]
+        (
-          .cssRules[0] as CSSStyleRule).style.setProperty('color', 'green');
+          document.adoptedStyleSheets![0].cssRules[0] as CSSStyleRule
-        (document.adoptedStyleSheets![0]
+        ).style.setProperty('color', 'green');
-          .cssRules[0] as CSSStyleRule).style.removeProperty('display');
+        (
+          document.adoptedStyleSheets![0].cssRules[0] as CSSStyleRule
+        ).style.removeProperty('display');
       });
       await frame.evaluate(() => {
-        (document.adoptedStyleSheets![0]
+        (
-          .cssRules[0] as CSSStyleRule).style.setProperty(
+          document.adoptedStyleSheets![0].cssRules[0] as CSSStyleRule
-          'font-size',
+        ).style.setProperty('font-size', 'medium', 'important');
-          'medium',
-          'important',
-        );
         document.adoptedStyleSheets![0].insertRule('h2 { color: red; }');
       });
       await waitForRAF(ctx.page);
@@ -445,8 +444,9 @@ describe('cross origin iframes', function (this: ISuite) {
           'color',
           'green',
         );
-        (document.styleSheets[0]
+        (
-          .cssRules[0] as CSSStyleRule).style.removeProperty('display');
+          document.styleSheets[0].cssRules[0] as CSSStyleRule
+        ).style.removeProperty('display');
       });
       await frame.evaluate(() => {
         (document.styleSheets[0].cssRules[0] as CSSStyleRule).style.setProperty(
@@ -596,7 +596,7 @@ describe('same origin iframes', function (this: ISuite) {
 
   it('should emit contents of iframe once', async () => {
     const events = await ctx.page.evaluate(
-      () => ((window as unknown) as IWindow).snapshots,
+      () => (window as unknown as IWindow).snapshots,
     );
     await waitForRAF(ctx.page);
     // two events (full snapshot + meta) from main frame,

packages/rrweb/test/record/webgl.test.ts

@@ -64,13 +64,13 @@ const setup = function (
     ctx.page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
 
     await ctx.page.evaluate((canvasSample) => {
-      const { record } = ((window as unknown) as IWindow).rrweb;
+      const { record } = (window as unknown as IWindow).rrweb;
       record({
         recordCanvas: true,
         sampling: {
           canvas: canvasSample,
         },
-        emit: ((window as unknown) as IWindow).emit,
+        emit: (window as unknown as IWindow).emit,
       });
     }, canvasSample);
   });

packages/rrweb/test/replay/webgl-mutation.test.ts

@@ -22,9 +22,9 @@ describe('webglMutation', () => {
     const createShaderMock = jest.fn().mockImplementation(() => {
       return new WebGLShader();
     });
-    const context = ({
+    const context = {
       createShader: createShaderMock,
-    } as unknown) as WebGLRenderingContext;
+    } as unknown as WebGLRenderingContext;
     jest.spyOn(canvas, 'getContext').mockImplementation(() => {
       return context;
     });

packages/rrweb/test/replayer.test.ts

@@ -597,7 +597,9 @@ describe('replayer', function () {
     expect(
       await iframeTwoDocument!.evaluate(
         (iframe) => (iframe as HTMLIFrameElement)!.contentDocument!.doctype,
-        (await iframeTwoDocument!.$$('iframe'))[1],
+        (
+          await iframeTwoDocument!.$$('iframe')
+        )[1],
       ),
     ).not.toBeNull();
   });

packages/rrweb/test/utils.ts

@@ -17,7 +17,7 @@ import * as url from 'url';
 import * as fs from 'fs';
 
 export async function launchPuppeteer(
-  options?: Parameters<typeof puppeteer['launch']>[0],
+  options?: Parameters<(typeof puppeteer)['launch']>[0],
 ) {
   return await puppeteer.launch({
     headless: process.env.PUPPETEER_HEADLESS ? true : false,
@@ -119,7 +119,8 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
           s.data.href = 'about:blank';
         }
         // FIXME: travis coordinates seems different with my laptop
-        const coordinatesReg = /(bottom|top|left|right|width|height): \d+(\.\d+)?px/g;
+        const coordinatesReg =
+          /(bottom|top|left|right|width|height): \d+(\.\d+)?px/g;
         if (
           s.type === EventType.IncrementalSnapshot &&
           s.data.source === IncrementalSource.MouseInteraction
@@ -178,10 +179,8 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
                 add.node.attributes.rr_dataURL &&
                 typeof add.node.attributes.rr_dataURL === 'string'
               ) {
-                add.node.attributes.rr_dataURL = add.node.attributes.rr_dataURL.replace(
+                add.node.attributes.rr_dataURL =
-                  /,.+$/,
+                  add.node.attributes.rr_dataURL.replace(/,.+$/, ',...');
-                  ',...',
-                );
               }
             }
           });
@@ -284,7 +283,7 @@ export function stripBase64(events: eventWithTime[]) {
   const base64Strings: string[] = [];
   function walk<T>(obj: T): T {
     if (!obj || typeof obj !== 'object') return obj;
-    if (Array.isArray(obj)) return (obj.map((e) => walk(e)) as unknown) as T;
+    if (Array.isArray(obj)) return obj.map((e) => walk(e)) as unknown as T;
     const newObj: Partial<T> = {};
     for (const prop in obj) {
       const value = obj[prop];