Record canvas snapshots N times per second (#859)

* Only record canvas when recordCanvas is true

* All should be compiled first

Makes recompiling+debugging a lot faster

* Add support for compiling web workes

Replaces @rollup/plugin-typescript for rollup-plugin-typescript2 as the former is incompatible with rollup-plugin-web-worker-loader

* Update yarn.lock

* Upgrade to typescript 4.5.5

* add support for replay of ImageBitmap in 2d canvas

* Snapshot canvases in a web-worker on FPS basis

* Fix performance of canvas recording and playback

* Wait for all images to be preloaded before checking results

* flatten base64 strings, as encoding isn't consistent

* Cleanup

* Add serializing to 2d canvases as well

* Disable blob serialize test

We don't have any code for it yet

* Upgrade @rollup/plugin-commonjs to 21.0.2

Fixes
https://linguinecode.com/post/import-export-appear-at-the-top-level

* Move canvas recording options to `sampling`

Based on: https://github.com/rrweb-io/rrweb/pull/859#discussion_r846582146

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

@@ -6,4 +6,4 @@ export default function canvasMutation({ event, mutation, target, imageMap, erro
     target: HTMLCanvasElement;
     imageMap: Replayer['imageMap'];
     errorHandler: Replayer['warnCanvasMutationFailed'];
-}): void;
+}): Promise<void>;

packages/rrweb/typings/replay/canvas/deserialize-args.d.ts

@@ -0,0 +1,7 @@
+import type { Replayer } from '../';
+import { CanvasArg, SerializedCanvasArg } from '../../types';
+export declare function variableListFor(ctx: CanvasRenderingContext2D | WebGLRenderingContext | WebGL2RenderingContext, ctor: string): any[];
+export declare function isSerializedArg(arg: unknown): arg is SerializedCanvasArg;
+export declare function deserializeArg(imageMap: Replayer['imageMap'], ctx: CanvasRenderingContext2D | WebGLRenderingContext | WebGL2RenderingContext | null, preload?: {
+    isUnchanged: boolean;
+}): (arg: CanvasArg) => Promise<any>;

packages/rrweb/typings/replay/canvas/index.d.ts

@@ -1,9 +1,10 @@
 import { Replayer } from '..';
 import { canvasMutationData } from '../../types';
-export default function canvasMutation({ event, mutation, target, imageMap, errorHandler, }: {
+export default function canvasMutation({ event, mutation, target, imageMap, canvasEventMap, errorHandler, }: {
     event: Parameters<Replayer['applyIncremental']>[0];
     mutation: canvasMutationData;
     target: HTMLCanvasElement;
     imageMap: Replayer['imageMap'];
+    canvasEventMap: Replayer['canvasEventMap'];
     errorHandler: Replayer['warnCanvasMutationFailed'];
-}): void;
+}): Promise<void>;

packages/rrweb/typings/replay/canvas/webgl.d.ts

@@ -1,11 +1,9 @@
-import { Replayer } from '../';
-import { CanvasContext, canvasMutationCommand, SerializedWebGlArg } from '../../types';
-export declare function variableListFor(ctx: WebGLRenderingContext | WebGL2RenderingContext, ctor: string): any[];
-export declare function deserializeArg(imageMap: Replayer['imageMap'], ctx: WebGLRenderingContext | WebGL2RenderingContext): (arg: SerializedWebGlArg) => any;
+import type { Replayer } from '../';
+import { CanvasContext, canvasMutationCommand } from '../../types';
 export default function webglMutation({ mutation, target, type, imageMap, errorHandler, }: {
     mutation: canvasMutationCommand;
     target: HTMLCanvasElement;
     type: CanvasContext;
     imageMap: Replayer['imageMap'];
     errorHandler: Replayer['warnCanvasMutationFailed'];
-}): void;
+}): Promise<void>;

packages/rrweb/typings/replay/index.d.ts

@@ -22,6 +22,7 @@ export declare class Replayer {
     private virtualStyleRulesMap;
     private cache;
     private imageMap;
+    private canvasEventMap;
     private mirror;
     private firstFullSnapshot;
     private newDocumentQueue;
@@ -56,6 +57,7 @@ export declare class Replayer {
     private getImageArgs;
     private preloadAllImages;
     private preloadImages;
+    private deserializeAndPreloadCanvasEvents;
     private applyIncremental;
     private applyMutation;
     private applyScroll;