From 03bbcf770edd33ad7aa8ed2d4258b105b910721a Mon Sep 17 00:00:00 2001 From: Yun Feng Date: Sat, 25 Jun 2022 20:31:38 +1000 Subject: [PATCH] refactor: eliminate eslint errors as many as I can --- .eslintrc.js | 3 ++ packages/rrweb/package.json | 2 +- packages/rrweb/src/replay/index.ts | 40 ++++++++++++----------- packages/rrweb/src/replay/smoothscroll.ts | 2 +- packages/rrweb/src/utils.ts | 4 +-- packages/rrweb/test/integration.test.ts | 11 +++++-- packages/rrweb/tsconfig.json | 3 +- yarn.lock | 8 ++--- 8 files changed, 42 insertions(+), 31 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 2f332b6bbd..ebf67aa9ce 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -19,5 +19,8 @@ module.exports = { plugins: ['@typescript-eslint', 'eslint-plugin-tsdoc'], rules: { 'tsdoc/syntax': 'warn', + '@typescript-eslint/unbound-method': 'off', + '@typescript-eslint/no-unsafe-member-access': 'off', + '@typescript-eslint/restrict-template-expressions': 'off', }, }; diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json index 62da2925bc..6ce56c9368 100644 --- a/packages/rrweb/package.json +++ b/packages/rrweb/package.json @@ -78,7 +78,7 @@ "@xstate/fsm": "^1.4.0", "base64-arraybuffer": "^1.0.1", "fflate": "^0.4.4", - "mitt": "^1.1.3", + "mitt": "^3.0.0", "rrdom": "^0.1.2", "rrweb-snapshot": "^1.1.14" } diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts index 99d64b99ca..6695fccf21 100644 --- a/packages/rrweb/src/replay/index.ts +++ b/packages/rrweb/src/replay/index.ts @@ -42,7 +42,6 @@ import { viewportResizeDimension, missingNodeMap, addedNodeMutation, - missingNode, incrementalSnapshotEvent, incrementalData, ReplayerEvents, @@ -54,7 +53,6 @@ import { scrollData, inputData, canvasMutationData, - styleAttributeValue, styleValueWithPriority, mouseMovePos, IWindow, @@ -83,8 +81,7 @@ const SKIP_TIME_THRESHOLD = 10 * 1000; const SKIP_TIME_INTERVAL = 5 * 1000; // https://github.com/rollup/rollup/issues/1267#issuecomment-296395734 -// tslint:disable-next-line -const mitt = (mittProxy as any).default || mittProxy; +const mitt = mittProxy.default || mittProxy; const REPLAY_CONSOLE_PREFIX = '[replayer]'; @@ -188,7 +185,7 @@ export class Replayer { canvasMutationData: canvasMutationData, target: HTMLCanvasElement, ) => { - canvasMutation({ + void canvasMutation({ event: canvasEvent, mutation: canvasMutationData, target, @@ -340,8 +337,10 @@ export class Replayer { public setConfig(config: Partial) { Object.keys(config).forEach((key) => { - // @ts-ignore - this.config[key] = config[key]; + const newConfigValue = config[key as keyof playerConfig]; + (this.config as Record)[ + key as keyof playerConfig + ] = config[key as keyof playerConfig]; }); if (!this.config.skipInactive) { this.backToNormal(); @@ -404,7 +403,7 @@ export class Replayer { * So the implementation of play at any time offset will always iterate * all of the events, cast event before the offset synchronously * and cast event after the offset asynchronously with timer. - * @param timeOffset number + * @param timeOffset - number */ public play(timeOffset = 0) { if (this.service.state.matches('paused')) { @@ -452,7 +451,7 @@ export class Replayer { if (indicatesTouchDevice(event)) { this.mouse.classList.add('touch-device'); } - Promise.resolve().then(() => + void Promise.resolve().then(() => this.service.send({ type: 'ADD_EVENT', payload: { event } }), ); } @@ -714,7 +713,7 @@ export class Replayer { this.waitForStylesheetLoad(); } if (this.config.UNSAFE_replayCanvas) { - this.preloadAllImages(); + void this.preloadAllImages(); } } @@ -875,7 +874,7 @@ export class Replayer { if (!arg || typeof arg !== 'object') { // do nothing } else if ('rr_type' in arg && 'args' in arg) { - if (this.hasImageArg(arg.args)) return true; + if (this.hasImageArg(arg.args as any[])) return true; } else if ('rr_type' in arg && arg.rr_type === 'HTMLImageElement') { return true; // has image! } else if (arg instanceof Array) { @@ -891,9 +890,9 @@ export class Replayer { if (!arg || typeof arg !== 'object') { // do nothing } else if ('rr_type' in arg && 'args' in arg) { - images.push(...this.getImageArgs(arg.args)); + images.push(...this.getImageArgs(arg.args as any[])); } else if ('rr_type' in arg && arg.rr_type === 'HTMLImageElement') { - images.push(arg.src); + images.push(arg.src as string); } else if (arg instanceof Array) { images.push(...this.getImageArgs(arg)); } @@ -940,7 +939,7 @@ export class Replayer { const ctx = canvas.getContext('2d'); const imgd = ctx?.createImageData(canvas.width, canvas.height); let d = imgd?.data; - d = JSON.parse(data.args[0]); + d = JSON.parse(data.args[0]) as Uint8ClampedArray; ctx?.putImageData(imgd!, 0, 0); } } @@ -1013,6 +1012,7 @@ export class Replayer { }); // add a dummy action to keep timer alive this.timer.addAction({ + // eslint-disable-next-line @typescript-eslint/no-empty-function doAction() {}, delay: e.delay! - d.positions[0]?.timeOffset, }); @@ -1174,7 +1174,7 @@ export class Replayer { // i.e. media will evntualy start to play when data is loaded // 'canplay' event fires even when currentTime attribute changes which may lead to // unexpeted behavior - mediaEl.play(); + void mediaEl.play(); } } catch (error) { if (this.config.showWarning) { @@ -1322,7 +1322,7 @@ export class Replayer { if (!target) { return this.debugNodeNotFound(d, d.id); } - canvasMutation({ + void canvasMutation({ event: e, mutation: d, target: target as HTMLCanvasElement, @@ -1337,7 +1337,9 @@ export class Replayer { try { const fontFace = new FontFace( d.family, - d.buffer ? new Uint8Array(JSON.parse(d.fontSource)) : d.fontSource, + d.buffer + ? new Uint8Array(JSON.parse(d.fontSource) as Iterable) + : d.fontSource, d.descriptors, ); this.iframe.contentDocument?.fonts.add(fontFace); @@ -1711,8 +1713,8 @@ export class Replayer { /** * Apply the scroll data on real elements. * If the replayer is in sync mode, smooth scroll behavior should be disabled. - * @param d the scroll data - * @param isSync whether the replayer is in sync mode(fast-forward) + * @param d - the scroll data + * @param isSync - whether the replayer is in sync mode(fast-forward) */ private applyScroll(d: scrollData, isSync: boolean) { const target = this.mirror.getNode(d.id); diff --git a/packages/rrweb/src/replay/smoothscroll.ts b/packages/rrweb/src/replay/smoothscroll.ts index 5f03a0aaeb..569968b114 100644 --- a/packages/rrweb/src/replay/smoothscroll.ts +++ b/packages/rrweb/src/replay/smoothscroll.ts @@ -3,8 +3,8 @@ * Add support of customize target window and document */ +/* eslint-disable */ // @ts-nocheck -// tslint:disable export function polyfill(w: Window = window, d = document) { // return if scroll behavior is supported and polyfill is not forced if ( diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts index 81108b58b5..467193c510 100644 --- a/packages/rrweb/src/utils.ts +++ b/packages/rrweb/src/utils.ts @@ -70,14 +70,14 @@ export function throttle( ) { let timeout: ReturnType | null = null; let previous = 0; - return function (arg: T) { + return function (...args: T[]) { const now = Date.now(); if (!previous && options.leading === false) { previous = now; } const remaining = wait - (now - previous); + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-this-alias const context = this; - const args = arguments; if (remaining <= 0 || remaining > wait) { if (timeout) { clearTimeout(timeout); diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts index 797d537346..a4a437884a 100644 --- a/packages/rrweb/test/integration.test.ts +++ b/packages/rrweb/test/integration.test.ts @@ -12,7 +12,12 @@ import { generateRecordSnippet, ISuite, } from './utils'; -import { recordOptions, eventWithTime, EventType } from '../src/types'; +import { + recordOptions, + eventWithTime, + EventType, + RecordPlugin, +} from '../src/types'; import { visitSnapshot, NodeType } from 'rrweb-snapshot'; describe('record integration tests', function (this: ISuite) { @@ -442,8 +447,8 @@ describe('record integration tests', function (this: ISuite) { const page: puppeteer.Page = await browser.newPage(); await page.goto('about:blank'); await page.setContent( - getHtml.call(this, 'log.html', { - plugins: '[rrwebConsoleRecord.getRecordConsolePlugin()]', + getHtml('log.html', { + plugins: ('[rrwebConsoleRecord.getRecordConsolePlugin()]' as unknown) as RecordPlugin[], }), ); diff --git a/packages/rrweb/tsconfig.json b/packages/rrweb/tsconfig.json index 57ec0c4979..c95913f748 100644 --- a/packages/rrweb/tsconfig.json +++ b/packages/rrweb/tsconfig.json @@ -11,7 +11,8 @@ "outDir": "build", "lib": ["es6", "dom"], "downlevelIteration": true, - "importsNotUsedAsValues": "error" + "importsNotUsedAsValues": "error", + "strictBindCallApply": true }, "exclude": ["test"], "include": [ diff --git a/yarn.lock b/yarn.lock index f6c36883b2..8e328ede0f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7943,10 +7943,10 @@ minizlib@^2.0.0, minizlib@^2.1.1: minipass "^3.0.0" yallist "^4.0.0" -mitt@^1.1.3: - version "1.2.0" - resolved "https://registry.npmjs.org/mitt/-/mitt-1.2.0.tgz" - integrity sha512-r6lj77KlwqLhIUku9UWYes7KJtsczvolZkzp8hbaDPPaE24OmWl5s539Mytlj22siEQKosZ26qCBgda2PKwoJw== +mitt@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.0.tgz#69ef9bd5c80ff6f57473e8d89326d01c414be0bd" + integrity sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ== mkdirp-classic@^0.5.2: version "0.5.3"