Upgrade Typescript to 4.6.2, and bump up other packages (#856)

packages/rrweb/package.json

@@ -42,13 +42,13 @@
   "homepage": "https://github.com/rrweb-io/rrweb#readme",
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^7.0.0",
-    "@rollup/plugin-typescript": "^8.2.5",
+    "@rollup/plugin-typescript": "^8.3.1",
     "@types/chai": "^4.1.6",
     "@types/inquirer": "0.0.43",
-    "@types/jest": "^27.0.2",
+    "@types/jest": "^27.4.1",
     "@types/jest-image-snapshot": "^4.3.1",
-    "@types/jsdom": "^16.2.12",
+    "@types/jsdom": "^16.2.14",
-    "@types/node": "^12.20.16",
+    "@types/node": "^17.0.21",
     "@types/prettier": "^2.3.2",
     "@types/puppeteer": "^5.4.4",
     "cross-env": "^5.2.0",
@@ -56,7 +56,7 @@
     "identity-obj-proxy": "^3.0.0",
     "ignore-styles": "^5.0.1",
     "inquirer": "^6.2.1",
-    "jest": "^27.2.4",
+    "jest": "^27.5.1",
     "jest-image-snapshot": "^4.5.1",
     "jest-snapshot": "^23.6.0",
     "jsdom": "^17.0.0",
@@ -67,11 +67,11 @@
     "rollup-plugin-postcss": "^3.1.1",
     "rollup-plugin-rename-node-modules": "^1.1.0",
     "rollup-plugin-terser": "^7.0.2",
-    "ts-jest": "^27.0.5",
+    "ts-jest": "^27.1.3",
-    "ts-node": "^7.0.1",
+    "ts-node": "^10.7.0",
-    "tslib": "^1.9.3",
+    "tslib": "^2.3.1",
-    "tslint": "^4.5.1",
+    "tslint": "^6.1.3",
-    "typescript": "^3.9.5"
+    "typescript": "^4.6.2"
   },
   "dependencies": {
     "@types/css-font-loading-module": "0.0.7",

packages/rrweb/src/record/mutation.ts

@@ -17,6 +17,7 @@ import {
   styleAttributeValue,
   observerParam,
   MutationBufferParam,
+  Optional,
 } from '../types';
 import {
   isBlocked,
@@ -109,7 +110,7 @@ class DoubleLinkedList {
       }
     }
     if (n.__ln) {
-      delete n.__ln;
+      delete (n as Optional<NodeInLinkedList, '__ln'>).__ln;
     }
     this.length--;
   }

packages/rrweb/src/record/observer.ts

@@ -54,18 +54,20 @@ const isCSSMediaRuleSupported = typeof CSSMediaRule !== 'undefined';
 const isCSSSupportsRuleSupported = typeof CSSSupportsRule !== 'undefined';
 const isCSSConditionRuleSupported = typeof CSSConditionRule !== 'undefined';
 
-function getEventTarget(event: Event): EventTarget | null {
+// Event.path is non-standard and used in some older browsers
+type NonStandardEvent = Omit<Event, 'composedPath'> & {
+  path: EventTarget[];
+};
+
+function getEventTarget(event: Event | NonStandardEvent): EventTarget | null {
   try {
     if ('composedPath' in event) {
       const path = event.composedPath();
       if (path.length) {
         return path[0];
       }
-    } else if (
+    } else if ('path' in event && event.path.length) {
-      'path' in event &&
+      return event.path[0];
-      (event as { path: EventTarget[] }).path.length
-    ) {
-      return (event as { path: EventTarget[] }).path[0];
     }
     return event.target;
   } catch {

packages/rrweb/src/types.ts

@@ -686,3 +686,5 @@ declare global {
 }
 
 export type IWindow = Window & typeof globalThis;
+
+export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;

packages/rrweb/test/utils.ts

@@ -4,6 +4,9 @@ import {
   IncrementalSource,
   eventWithTime,
   MouseInteractions,
+  Optional,
+  mouseInteractionData,
+  event,
 } from '../src/types';
 import * as puppeteer from 'puppeteer';
 import { format } from 'prettier';
@@ -106,8 +109,8 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
           s.type === EventType.IncrementalSnapshot &&
           s.data.source === IncrementalSource.MouseInteraction
         ) {
-          delete s.data.x;
+          delete (s.data as Optional<mouseInteractionData, 'x'>).x;
-          delete s.data.y;
+          delete (s.data as Optional<mouseInteractionData, 'y'>).y;
         }
         if (
           s.type === EventType.IncrementalSnapshot &&
@@ -149,8 +152,8 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
             coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
           });
         }
-        delete s.timestamp;
+        delete (s as Optional<eventWithTime, 'timestamp'>).timestamp;
-        return s;
+        return s as event;
       }),
     null,
     2,

packages/rrweb/typings/record/observers/canvas/serialize-args.d.ts

@@ -3,4 +3,4 @@ export declare function variableListFor(ctx: WebGLRenderingContext | WebGL2Rende
 export declare const saveWebGLVar: (value: any, win: IWindow, ctx: WebGL2RenderingContext | WebGLRenderingContext) => number | void;
 export declare function serializeArg(value: any, win: IWindow, ctx: WebGL2RenderingContext | WebGLRenderingContext): SerializedWebGlArg;
 export declare const serializeArgs: (args: Array<any>, win: IWindow, ctx: WebGLRenderingContext | WebGL2RenderingContext) => SerializedWebGlArg[];
-export declare const isInstanceOfWebGLObject: (value: any, win: IWindow) => value is WebGLShader | WebGLBuffer | WebGLVertexArrayObject | WebGLTexture | WebGLProgram | WebGLActiveInfo | WebGLUniformLocation | WebGLFramebuffer | WebGLRenderbuffer | WebGLShaderPrecisionFormat;
+export declare const isInstanceOfWebGLObject: (value: any, win: IWindow) => value is WebGLTexture | WebGLShader | WebGLBuffer | WebGLVertexArrayObject | WebGLProgram | WebGLActiveInfo | WebGLUniformLocation | WebGLFramebuffer | WebGLRenderbuffer | WebGLShaderPrecisionFormat;

packages/rrweb/typings/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="css-font-loading-module" />
 import { serializedNodeWithId, idNodeMap, INode, MaskInputOptions, SlimDOMOptions, MaskInputFn, MaskTextFn } from 'rrweb-snapshot';
 import { PackFn, UnpackFn } from './packer/base';
 import { IframeManager } from './record/iframe-manager';