From 4a704ec236fb03eeed4ee16e6b7af288dd8524ab Mon Sep 17 00:00:00 2001 From: p-mazhnik Date: Fri, 15 Mar 2024 03:48:17 +0300 Subject: [PATCH 01/34] support recording canvas in iframe and shadow dom --- packages/rrweb/src/record/index.ts | 4 + packages/rrweb/src/record/mutation.ts | 4 + .../record/observers/canvas/canvas-manager.ts | 200 +++-- .../rrweb/src/record/shadow-dom-manager.ts | 2 + .../__snapshots__/integration.test.ts.snap | 734 ++++++++++++++++++ packages/rrweb/test/html/canvas-iframe.html | 6 + .../rrweb/test/html/canvas-shadow-dom.html | 30 + packages/rrweb/test/integration.test.ts | 135 +++- .../record/__snapshots__/webgl.test.ts.snap | 166 ++++ packages/rrweb/test/record/webgl.test.ts | 51 ++ packages/rrweb/test/utils.ts | 3 +- packages/rrweb/tsconfig.json | 3 +- 12 files changed, 1274 insertions(+), 64 deletions(-) create mode 100644 packages/rrweb/test/html/canvas-iframe.html create mode 100644 packages/rrweb/test/html/canvas-shadow-dom.html diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts index 3b4475cfc9..dc5bfee1fd 100644 --- a/packages/rrweb/src/record/index.ts +++ b/packages/rrweb/src/record/index.ts @@ -27,6 +27,7 @@ import { scrollCallback, canvasMutationParam, adoptedStyleSheetParam, + IWindow, } from '@rrweb/types'; import type { CrossOriginIframeMessageEventContent } from '../types'; import { IframeManager } from './iframe-manager'; @@ -393,6 +394,9 @@ function record( }, onIframeLoad: (iframe, childSn) => { iframeManager.attachIframe(iframe, childSn); + if (iframe.contentWindow) { + canvasManager.addWindow(iframe.contentWindow as IWindow); + } shadowDomManager.observeAttachShadow(iframe); }, onStylesheetLoad: (linkEl, childSn) => { diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts index 81592e8170..913a594cb4 100644 --- a/packages/rrweb/src/record/mutation.ts +++ b/packages/rrweb/src/record/mutation.ts @@ -19,6 +19,7 @@ import type { removedNodeMutation, addedNodeMutation, Optional, + IWindow, } from '@rrweb/types'; import { isBlocked, @@ -331,6 +332,9 @@ export default class MutationBuffer { }, onIframeLoad: (iframe, childSn) => { this.iframeManager.attachIframe(iframe, childSn); + if (iframe.contentWindow) { + this.canvasManager.addWindow(iframe.contentWindow as IWindow); + } this.shadowDomManager.observeAttachShadow(iframe); }, onStylesheetLoad: (link, childSn) => { diff --git a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts index a8e06e468b..4ede3efa3a 100644 --- a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts +++ b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts @@ -24,19 +24,53 @@ type pendingCanvasMutationsMap = Map< canvasMutationWithType[] >; +export interface CanvasManagerConstructorOptions { + recordCanvas: boolean; + mutationCb: canvasMutationCallback; + win: IWindow; + blockClass: blockClass; + blockSelector: string | null; + mirror: Mirror; + sampling?: 'all' | number; + dataURLOptions: DataURLOptions; +} + export class CanvasManager { private pendingCanvasMutations: pendingCanvasMutationsMap = new Map(); private rafStamps: RafStamps = { latestId: 0, invokeId: null }; + private options: CanvasManagerConstructorOptions; private mirror: Mirror; + private shadowDoms = new Set>(); + private windowsSet = new WeakSet(); + private windows: WeakRef[] = []; + private mutationCb: canvasMutationCallback; - private resetObservers?: listenerHandler; + private restoreHandlers: listenerHandler[] = []; private frozen = false; private locked = false; + private snapshotInProgressMap: Map = new Map(); + private worker: ImageBitmapDataURLRequestWorker | null = null; + public reset() { this.pendingCanvasMutations.clear(); - this.resetObservers && this.resetObservers(); + this.restoreHandlers.forEach((handler) => { + try { + handler(); + } catch (e) { + // + } + }); + this.restoreHandlers = []; + this.windowsSet = new WeakSet(); + this.windows = []; + this.shadowDoms = new Set(); + this.worker = null; + this.snapshotInProgressMap = new Map(); + if (this.options.recordCanvas && typeof this.options.sampling === 'number') { + this.worker = this.initFPSWorker(); + } } public freeze() { @@ -55,16 +89,7 @@ export class CanvasManager { this.locked = false; } - constructor(options: { - recordCanvas: boolean; - mutationCb: canvasMutationCallback; - win: IWindow; - blockClass: blockClass; - blockSelector: string | null; - mirror: Mirror; - sampling?: 'all' | number; - dataURLOptions: DataURLOptions; - }) { + constructor(options: CanvasManagerConstructorOptions) { const { sampling = 'all', win, @@ -75,53 +100,62 @@ export class CanvasManager { } = options; this.mutationCb = options.mutationCb; this.mirror = options.mirror; + this.options = options; - if (recordCanvas && sampling === 'all') - this.initCanvasMutationObserver(win, blockClass, blockSelector); - if (recordCanvas && typeof sampling === 'number') - this.initCanvasFPSObserver(sampling, win, blockClass, blockSelector, { + if (recordCanvas && sampling === 'all') { + this.startRAFTimestamping(); + this.startPendingCanvasMutationFlusher(); + } + if (recordCanvas && typeof sampling === 'number') { + this.worker = this.initFPSWorker(); + this.initCanvasFPSObserver(sampling, blockClass, blockSelector, { dataURLOptions, }); + } + this.addWindow(win); } - private processMutation: canvasManagerMutationCallback = ( - target, - mutation, - ) => { - const newFrame = - this.rafStamps.invokeId && - this.rafStamps.latestId !== this.rafStamps.invokeId; - if (newFrame || !this.rafStamps.invokeId) - this.rafStamps.invokeId = this.rafStamps.latestId; + public addWindow(win: IWindow) { + const { + sampling = 'all', + blockClass, + blockSelector, + recordCanvas, + } = this.options; + if (this.windowsSet.has(win)) return; - if (!this.pendingCanvasMutations.has(target)) { - this.pendingCanvasMutations.set(target, []); + if (recordCanvas && sampling === 'all') { + this.initCanvasMutationObserver(win, blockClass, blockSelector); + } + if (recordCanvas && typeof sampling === 'number') { + const canvasContextReset = initCanvasContextObserver( + win, + blockClass, + blockSelector, + true, + ); + this.restoreHandlers.push(() => { + canvasContextReset(); + }); } + this.windowsSet.add(win); + this.windows.push(new WeakRef(win)); + } - this.pendingCanvasMutations.get(target)!.push(mutation); - }; + public addShadowRoot(shadowRoot: ShadowRoot) { + this.shadowDoms.add(new WeakRef(shadowRoot)); + } - private initCanvasFPSObserver( - fps: number, - win: IWindow, - blockClass: blockClass, - blockSelector: string | null, - options: { - dataURLOptions: DataURLOptions; - }, - ) { - const canvasContextReset = initCanvasContextObserver( - win, - blockClass, - blockSelector, - true, - ); - const snapshotInProgressMap: Map = new Map(); + public resetShadowRoots() { + this.shadowDoms = new Set(); + } + + private initFPSWorker(): ImageBitmapDataURLRequestWorker { const worker = new ImageBitmapDataURLWorker() as ImageBitmapDataURLRequestWorker; worker.onmessage = (e) => { const { id } = e.data; - snapshotInProgressMap.set(id, false); + this.snapshotInProgressMap.set(id, false); if (!('base64' in e.data)) return; @@ -154,22 +188,67 @@ export class CanvasManager { ], }); }; + return worker; + } + private processMutation: canvasManagerMutationCallback = ( + target, + mutation, + ) => { + const newFrame = + this.rafStamps.invokeId && + this.rafStamps.latestId !== this.rafStamps.invokeId; + if (newFrame || !this.rafStamps.invokeId) + this.rafStamps.invokeId = this.rafStamps.latestId; + + if (!this.pendingCanvasMutations.has(target)) { + this.pendingCanvasMutations.set(target, []); + } + + this.pendingCanvasMutations.get(target)!.push(mutation); + }; + + private initCanvasFPSObserver( + fps: number, + blockClass: blockClass, + blockSelector: string | null, + options: { + dataURLOptions: DataURLOptions; + }, + ) { const timeBetweenSnapshots = 1000 / fps; let lastSnapshotTime = 0; let rafId: number; const getCanvas = (): HTMLCanvasElement[] => { const matchedCanvas: HTMLCanvasElement[] = []; - win.document.querySelectorAll('canvas').forEach((canvas) => { - if (!isBlocked(canvas, blockClass, blockSelector, true)) { - matchedCanvas.push(canvas); + const traverseDom = (root: Document | ShadowRoot) => { + root.querySelectorAll('canvas').forEach((canvas) => { + if (!isBlocked(canvas, blockClass, blockSelector, true)) { + matchedCanvas.push(canvas); + } + }); + }; + for (const item of this.windows) { + const window = item.deref(); + if (window) { + traverseDom(window.document); } - }); + } + for (const item of this.shadowDoms) { + const shadowRoot = item.deref(); + if (shadowRoot) { + traverseDom(shadowRoot); + } + } return matchedCanvas; }; const takeCanvasSnapshots = (timestamp: DOMHighResTimeStamp) => { + if (!this.windows.length) { + // exit loop if windows list is empty + return; + } if ( lastSnapshotTime && timestamp - lastSnapshotTime < timeBetweenSnapshots @@ -182,9 +261,12 @@ export class CanvasManager { getCanvas() // eslint-disable-next-line @typescript-eslint/no-misused-promises .forEach(async (canvas: HTMLCanvasElement) => { + if (!this.mirror.hasNode(canvas)) { + return; + } const id = this.mirror.getId(canvas); - if (snapshotInProgressMap.get(id)) return; - snapshotInProgressMap.set(id, true); + if (this.snapshotInProgressMap.get(id)) return; + this.snapshotInProgressMap.set(id, true); if (['webgl', 'webgl2'].includes((canvas as ICanvas).__context)) { // if the canvas hasn't been modified recently, // its contents won't be in memory and `createImageBitmap` @@ -208,7 +290,7 @@ export class CanvasManager { } } const bitmap = await createImageBitmap(canvas); - worker.postMessage( + this.worker?.postMessage( { id, bitmap, @@ -224,10 +306,9 @@ export class CanvasManager { rafId = requestAnimationFrame(takeCanvasSnapshots); - this.resetObservers = () => { - canvasContextReset(); + this.restoreHandlers.push(() => { cancelAnimationFrame(rafId); - }; + }); } private initCanvasMutationObserver( @@ -235,9 +316,6 @@ export class CanvasManager { blockClass: blockClass, blockSelector: string | null, ): void { - this.startRAFTimestamping(); - this.startPendingCanvasMutationFlusher(); - const canvasContextReset = initCanvasContextObserver( win, blockClass, @@ -259,11 +337,11 @@ export class CanvasManager { this.mirror, ); - this.resetObservers = () => { + this.restoreHandlers.push(() => { canvasContextReset(); canvas2DReset(); canvasWebGL1and2Reset(); - }; + }); } private startPendingCanvasMutationFlusher() { diff --git a/packages/rrweb/src/record/shadow-dom-manager.ts b/packages/rrweb/src/record/shadow-dom-manager.ts index 169c77216a..aab52371dd 100644 --- a/packages/rrweb/src/record/shadow-dom-manager.ts +++ b/packages/rrweb/src/record/shadow-dom-manager.ts @@ -52,6 +52,7 @@ export class ShadowDomManager { if (!isNativeShadowDom(shadowRoot)) return; if (this.shadowDoms.has(shadowRoot)) return; this.shadowDoms.add(shadowRoot); + this.bypassOptions.canvasManager.addShadowRoot(shadowRoot); const observer = initMutationObserver( { ...this.bypassOptions, @@ -151,5 +152,6 @@ export class ShadowDomManager { }); this.restoreHandlers = []; this.shadowDoms = new WeakSet(); + this.bypassOptions.canvasManager.resetShadowRoots(); } } diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap index ae1aa7bf54..0e99df870c 100644 --- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap +++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap @@ -4960,6 +4960,740 @@ exports[`record integration tests can use maskInputOptions to configure which ty ]" `; +exports[`record integration tests canvas should record canvas within iframe 1`] = ` +"[ + { + \\"type\\": 0, + \\"data\\": {} + }, + { + \\"type\\": 1, + \\"data\\": {} + }, + { + \\"type\\": 4, + \\"data\\": { + \\"href\\": \\"about:blank\\", + \\"width\\": 1920, + \\"height\\": 1080 + } + }, + { + \\"type\\": 2, + \\"data\\": { + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 1, + \\"name\\": \\"html\\", + \\"publicId\\": \\"\\", + \\"systemId\\": \\"\\", + \\"id\\": 2 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [], + \\"id\\": 4 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 6 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"iframe\\", + \\"attributes\\": { + \\"id\\": \\"iframe-canvas\\", + \\"width\\": \\"100%\\", + \\"height\\": \\"100%\\" + }, + \\"childNodes\\": [], + \\"id\\": 7 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n\\\\n \\", + \\"id\\": 8 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 10 + } + ], + \\"id\\": 9 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\", + \\"id\\": 11 + } + ], + \\"id\\": 5 + } + ], + \\"id\\": 3 + } + ], + \\"id\\": 1 + }, + \\"initialOffset\\": { + \\"left\\": 0, + \\"top\\": 0 + } + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"adds\\": [ + { + \\"parentId\\": 7, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 1, + \\"name\\": \\"html\\", + \\"publicId\\": \\"\\", + \\"systemId\\": \\"\\", + \\"rootId\\": 12, + \\"id\\": 13 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": { + \\"lang\\": \\"en\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 12, + \\"id\\": 16 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"charset\\": \\"UTF-8\\" + }, + \\"childNodes\\": [], + \\"rootId\\": 12, + \\"id\\": 17 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 12, + \\"id\\": 18 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"name\\": \\"viewport\\", + \\"content\\": \\"width=device-width, initial-scale=1.0\\" + }, + \\"childNodes\\": [], + \\"rootId\\": 12, + \\"id\\": 19 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 12, + \\"id\\": 20 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"title\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"canvas\\", + \\"rootId\\": 12, + \\"id\\": 22 + } + ], + \\"rootId\\": 12, + \\"id\\": 21 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 12, + \\"id\\": 23 + } + ], + \\"rootId\\": 12, + \\"id\\": 15 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 12, + \\"id\\": 24 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 12, + \\"id\\": 26 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"canvas\\", + \\"attributes\\": { + \\"id\\": \\"myCanvas\\", + \\"width\\": \\"200\\", + \\"height\\": \\"100\\", + \\"style\\": \\"border: 1px solid #000000;\\", + \\"rr_dataURL\\": \\"data:image/png;base64,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\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 12, + \\"id\\": 28 + } + ], + \\"rootId\\": 12, + \\"id\\": 27 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 12, + \\"id\\": 29 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"rootId\\": 12, + \\"id\\": 31 + } + ], + \\"rootId\\": 12, + \\"id\\": 30 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n\\\\n\\", + \\"rootId\\": 12, + \\"id\\": 32 + } + ], + \\"rootId\\": 12, + \\"id\\": 25 + } + ], + \\"rootId\\": 12, + \\"id\\": 14 + } + ], + \\"id\\": 12 + } + } + ], + \\"removes\\": [], + \\"texts\\": [], + \\"attributes\\": [], + \\"isAttachIframe\\": true + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 9, + \\"id\\": 27, + \\"type\\": 0, + \\"commands\\": [ + { + \\"property\\": \\"moveTo\\", + \\"args\\": [ + 0, + 0 + ] + }, + { + \\"property\\": \\"lineTo\\", + \\"args\\": [ + 200, + 100 + ] + }, + { + \\"property\\": \\"stroke\\", + \\"args\\": [] + } + ] + } + } +]" +`; + +exports[`record integration tests canvas should record canvas within shadow dom 1`] = ` +"[ + { + \\"type\\": 0, + \\"data\\": {} + }, + { + \\"type\\": 1, + \\"data\\": {} + }, + { + \\"type\\": 4, + \\"data\\": { + \\"href\\": \\"about:blank\\", + \\"width\\": 1920, + \\"height\\": 1080 + } + }, + { + \\"type\\": 2, + \\"data\\": { + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 1, + \\"name\\": \\"html\\", + \\"publicId\\": \\"\\", + \\"systemId\\": \\"\\", + \\"id\\": 2 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [], + \\"id\\": 4 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 6 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"div\\", + \\"attributes\\": { + \\"id\\": \\"shadow-root\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"canvas\\", + \\"attributes\\": { + \\"width\\": \\"200\\", + \\"height\\": \\"200\\", + \\"rr_dataURL\\": \\"data:image/png;base64,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\\" + }, + \\"childNodes\\": [], + \\"id\\": 8, + \\"isShadow\\": true + } + ], + \\"id\\": 7, + \\"isShadowHost\\": true + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n\\\\n \\", + \\"id\\": 9 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 11 + } + ], + \\"id\\": 10 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\\\n\\", + \\"id\\": 12 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 14 + } + ], + \\"id\\": 13 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n\\\\n\\", + \\"id\\": 15 + } + ], + \\"id\\": 5 + } + ], + \\"id\\": 3 + } + ], + \\"id\\": 1 + }, + \\"initialOffset\\": { + \\"left\\": 0, + \\"top\\": 0 + } + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 9, + \\"id\\": 8, + \\"type\\": 0, + \\"commands\\": [ + { + \\"property\\": \\"clearRect\\", + \\"args\\": [ + 0, + 0, + 200, + 200 + ] + }, + { + \\"property\\": \\"fillStyle\\", + \\"args\\": [ + \\"green\\" + ], + \\"setter\\": true + }, + { + \\"property\\": \\"fillRect\\", + \\"args\\": [ + 40, + 40, + 50, + 50 + ] + } + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 9, + \\"id\\": 8, + \\"type\\": 0, + \\"commands\\": [ + { + \\"property\\": \\"clearRect\\", + \\"args\\": [ + 0, + 0, + 200, + 200 + ] + }, + { + \\"property\\": \\"fillStyle\\", + \\"args\\": [ + \\"green\\" + ], + \\"setter\\": true + }, + { + \\"property\\": \\"fillRect\\", + \\"args\\": [ + 100, + 100, + 50, + 50 + ] + } + ] + } + } +]" +`; + +exports[`record integration tests canvas should record canvas within shadow dom with sampling 1`] = ` +"[ + { + \\"type\\": 0, + \\"data\\": {} + }, + { + \\"type\\": 1, + \\"data\\": {} + }, + { + \\"type\\": 4, + \\"data\\": { + \\"href\\": \\"about:blank\\", + \\"width\\": 1920, + \\"height\\": 1080 + } + }, + { + \\"type\\": 2, + \\"data\\": { + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 1, + \\"name\\": \\"html\\", + \\"publicId\\": \\"\\", + \\"systemId\\": \\"\\", + \\"id\\": 2 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [], + \\"id\\": 4 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 6 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"div\\", + \\"attributes\\": { + \\"id\\": \\"shadow-root\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"canvas\\", + \\"attributes\\": { + \\"width\\": \\"200\\", + \\"height\\": \\"200\\", + \\"rr_dataURL\\": \\"data:image/png;base64,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\\" + }, + \\"childNodes\\": [], + \\"id\\": 8, + \\"isShadow\\": true + } + ], + \\"id\\": 7, + \\"isShadowHost\\": true + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n\\\\n \\", + \\"id\\": 9 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 11 + } + ], + \\"id\\": 10 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\\\n\\", + \\"id\\": 12 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 14 + } + ], + \\"id\\": 13 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n\\\\n\\", + \\"id\\": 15 + } + ], + \\"id\\": 5 + } + ], + \\"id\\": 3 + } + ], + \\"id\\": 1 + }, + \\"initialOffset\\": { + \\"left\\": 0, + \\"top\\": 0 + } + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 9, + \\"id\\": 8, + \\"type\\": 0, + \\"commands\\": [ + { + \\"property\\": \\"clearRect\\", + \\"args\\": [ + 0, + 0, + 200, + 200 + ] + }, + { + \\"property\\": \\"drawImage\\", + \\"args\\": [ + { + \\"rr_type\\": \\"ImageBitmap\\", + \\"args\\": [ + { + \\"rr_type\\": \\"Blob\\", + \\"data\\": [ + { + \\"rr_type\\": \\"ArrayBuffer\\", + \\"base64\\": \\"base64-0\\" + } + ], + \\"type\\": \\"image/png\\" + } + ] + }, + 0, + 0 + ] + } + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 9, + \\"id\\": 8, + \\"type\\": 0, + \\"commands\\": [ + { + \\"property\\": \\"clearRect\\", + \\"args\\": [ + 0, + 0, + 200, + 200 + ] + }, + { + \\"property\\": \\"drawImage\\", + \\"args\\": [ + { + \\"rr_type\\": \\"ImageBitmap\\", + \\"args\\": [ + { + \\"rr_type\\": \\"Blob\\", + \\"data\\": [ + { + \\"rr_type\\": \\"ArrayBuffer\\", + \\"base64\\": \\"base64-1\\" + } + ], + \\"type\\": \\"image/png\\" + } + ] + }, + 0, + 0 + ] + } + ] + } + } +]" +`; + exports[`record integration tests handles null attribute values 1`] = ` "[ { diff --git a/packages/rrweb/test/html/canvas-iframe.html b/packages/rrweb/test/html/canvas-iframe.html new file mode 100644 index 0000000000..1ae3b84224 --- /dev/null +++ b/packages/rrweb/test/html/canvas-iframe.html @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/rrweb/test/html/canvas-shadow-dom.html b/packages/rrweb/test/html/canvas-shadow-dom.html new file mode 100644 index 0000000000..3c29f4cf3f --- /dev/null +++ b/packages/rrweb/test/html/canvas-shadow-dom.html @@ -0,0 +1,30 @@ + + + +
+ + + diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts index 616b6e91cb..34eb5d9b63 100644 --- a/packages/rrweb/test/integration.test.ts +++ b/packages/rrweb/test/integration.test.ts @@ -11,9 +11,10 @@ import { replaceLast, generateRecordSnippet, ISuite, + stripBase64, } from './utils'; import type { recordOptions } from '../src/types'; -import { eventWithTime, EventType, RecordPlugin } from '@rrweb/types'; +import { eventWithTime, EventType, RecordPlugin, IncrementalSource, CanvasContext } from '@rrweb/types'; import { visitSnapshot, NodeType } from 'rrweb-snapshot'; describe('record integration tests', function (this: ISuite) { @@ -831,6 +832,138 @@ describe('record integration tests', function (this: ISuite) { assertSnapshot(snapshots); }); + describe('canvas', function (this: ISuite) { + jest.setTimeout(10_000); + it('should record canvas within iframe', async () => { + const page: puppeteer.Page = await browser.newPage(); + await page.goto(`${serverURL}/html`); + await page.setContent( + getHtml.call(this, 'canvas-iframe.html', { + recordCanvas: true, + }), + ); + + const frameId = await waitForIFrameLoad(page, '#iframe-canvas'); + await frameId.waitForFunction('window.canvasMutationApplied'); + await waitForRAF(page); + + const snapshots = (await page.evaluate( + 'window.snapshots', + )) as eventWithTime[]; + expect(snapshots[snapshots.length - 1].data).toEqual( + expect.objectContaining({ + source: IncrementalSource.CanvasMutation, + type: CanvasContext['2D'], + commands: expect.arrayContaining([ + { + args: [200, 100], + property: 'lineTo', + }, + ]), + }), + ); + assertSnapshot(stripBase64(snapshots)); + }); + + it('should record canvas within iframe with sampling', async () => { + const maxFPS = 60; + const page: puppeteer.Page = await browser.newPage(); + await page.goto(`${serverURL}/html`); + await page.setContent( + getHtml.call(this, 'canvas-iframe.html', { + recordCanvas: true, + sampling: { + canvas: maxFPS, + }, + }), + ); + + const frameId = await waitForIFrameLoad(page, '#iframe-canvas'); + await frameId.waitForFunction('window.canvasMutationApplied'); + await waitForRAF(page); + await page.waitForTimeout(1000 / maxFPS); + + const snapshots = (await page.evaluate( + 'window.snapshots', + )) as eventWithTime[]; + expect(snapshots[snapshots.length - 1].data).toEqual( + expect.objectContaining({ + source: IncrementalSource.CanvasMutation, + type: CanvasContext['2D'], + commands: expect.arrayContaining([ + expect.objectContaining({ + property: 'drawImage', + }), + ]), + }), + ); + }); + + it('should record canvas within shadow dom', async () => { + const page: puppeteer.Page = await browser.newPage(); + await page.goto(`${serverURL}/html`); + await page.setContent( + getHtml.call(this, 'canvas-shadow-dom.html', { + recordCanvas: true, + }), + ); + + await page.waitForFunction('window.canvasMutationApplied'); + await waitForRAF(page); + + const snapshots = (await page.evaluate( + 'window.snapshots', + )) as eventWithTime[]; + expect(snapshots[snapshots.length - 1].data).toEqual( + expect.objectContaining({ + source: IncrementalSource.CanvasMutation, + type: CanvasContext['2D'], + commands: expect.arrayContaining([ + { + args: [100, 100, 50, 50], + property: 'fillRect', + }, + ]), + }), + ); + assertSnapshot(stripBase64(snapshots)); + }); + + it('should record canvas within shadow dom with sampling', async () => { + const page: puppeteer.Page = await browser.newPage(); + await page.goto(`${serverURL}/html`); + await page.setContent( + getHtml.call(this, 'canvas-shadow-dom.html', { + recordCanvas: true, + sampling: { + canvas: 60, + }, + }), + ); + + await page.waitForFunction('window.canvasMutationApplied'); + await waitForRAF(page); + + await page.waitForTimeout(50); + + const snapshots = (await page.evaluate( + 'window.snapshots', + )) as eventWithTime[]; + expect(snapshots[snapshots.length - 1].data).toEqual( + expect.objectContaining({ + source: IncrementalSource.CanvasMutation, + type: CanvasContext['2D'], + commands: expect.arrayContaining([ + expect.objectContaining({ + property: 'drawImage', + }), + ]), + }), + ); + assertSnapshot(stripBase64(snapshots)); + }); + }); + it('should record images with blob url', async () => { const page: puppeteer.Page = await browser.newPage(); page.on('console', (msg) => console.log(msg.text())); diff --git a/packages/rrweb/test/record/__snapshots__/webgl.test.ts.snap b/packages/rrweb/test/record/__snapshots__/webgl.test.ts.snap index c7aeb17e1c..e465828cfa 100644 --- a/packages/rrweb/test/record/__snapshots__/webgl.test.ts.snap +++ b/packages/rrweb/test/record/__snapshots__/webgl.test.ts.snap @@ -1,5 +1,171 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`record webgl record canvas within iframe will record changes to a canvas element 1`] = ` +"[ + { + \\"type\\": 4, + \\"data\\": { + \\"href\\": \\"about:blank\\", + \\"width\\": 1920, + \\"height\\": 1080 + } + }, + { + \\"type\\": 2, + \\"data\\": { + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 1, + \\"name\\": \\"html\\", + \\"publicId\\": \\"\\", + \\"systemId\\": \\"\\", + \\"id\\": 2 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [], + \\"id\\": 4 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 6 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"iframe\\", + \\"attributes\\": { + \\"id\\": \\"iframe1\\" + }, + \\"childNodes\\": [], + \\"id\\": 7 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\\\n \\", + \\"id\\": 8 + } + ], + \\"id\\": 5 + } + ], + \\"id\\": 3 + } + ], + \\"id\\": 1 + }, + \\"initialOffset\\": { + \\"left\\": 0, + \\"top\\": 0 + } + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"adds\\": [ + { + \\"parentId\\": 7, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [], + \\"rootId\\": 9, + \\"id\\": 11 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [], + \\"rootId\\": 9, + \\"id\\": 12 + } + ], + \\"rootId\\": 9, + \\"id\\": 10 + } + ], + \\"compatMode\\": \\"BackCompat\\", + \\"id\\": 9 + } + } + ], + \\"removes\\": [], + \\"texts\\": [], + \\"attributes\\": [], + \\"isAttachIframe\\": true + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [], + \\"removes\\": [], + \\"adds\\": [ + { + \\"parentId\\": 12, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"canvas\\", + \\"attributes\\": { + \\"id\\": \\"canvas\\" + }, + \\"childNodes\\": [], + \\"rootId\\": 9, + \\"id\\": 13 + } + } + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 9, + \\"id\\": 13, + \\"type\\": 1, + \\"commands\\": [ + { + \\"property\\": \\"clear\\", + \\"args\\": [ + 16384 + ] + } + ] + } + } +]" +`; + exports[`record webgl recordCanvas FPS should record snapshots 1`] = ` "[ { diff --git a/packages/rrweb/test/record/webgl.test.ts b/packages/rrweb/test/record/webgl.test.ts index 762d3607bd..6dedc94cf7 100644 --- a/packages/rrweb/test/record/webgl.test.ts +++ b/packages/rrweb/test/record/webgl.test.ts @@ -14,6 +14,7 @@ import { launchPuppeteer, stripBase64, waitForRAF, + waitForIFrameLoad, } from '../utils'; import type { ICanvas } from 'rrweb-snapshot'; @@ -315,4 +316,54 @@ describe('record webgl', function (this: ISuite) { assertSnapshot(stripBase64(ctx.events)); }); }); + + describe('record canvas within iframe', function (this: ISuite) { + jest.setTimeout(10_000); + + const ctx: ISuite = setup.call( + this, + ` + + + + + + + `, + ); + + it('will record changes to a canvas element', async () => { + const frame = await waitForIFrameLoad(ctx.page, '#iframe1'); + await frame.evaluate(() => { + const canvas = document.createElement('canvas'); + canvas.id = 'canvas'; + document.body.appendChild(canvas); + }); + + await ctx.page.waitForTimeout(50); + + await frame.evaluate(() => { + const canvas = document.getElementById('canvas') as HTMLCanvasElement; + const gl = canvas.getContext('webgl')!; + + gl.clear(gl.COLOR_BUFFER_BIT); + }); + await ctx.page.waitForTimeout(50); + + const lastEvent = ctx.events[ctx.events.length - 1]; + expect(lastEvent).toMatchObject({ + data: { + source: IncrementalSource.CanvasMutation, + type: CanvasContext.WebGL, + commands: [ + { + args: [16384], + property: 'clear', + }, + ], + }, + }); + assertSnapshot(stripBase64(ctx.events)); + }); + }); }); diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts index 6cd93281f9..de4a7a480f 100644 --- a/packages/rrweb/test/utils.ts +++ b/packages/rrweb/test/utils.ts @@ -699,7 +699,8 @@ export function generateRecordSnippet(options: recordOptions) { recordCanvas: ${options.recordCanvas}, recordAfter: '${options.recordAfter || 'load'}', inlineImages: ${options.inlineImages}, - plugins: ${options.plugins} + plugins: ${options.plugins}, + sampling: ${JSON.stringify(options.sampling)}, }); `; } diff --git a/packages/rrweb/tsconfig.json b/packages/rrweb/tsconfig.json index fb1b407ad6..93d911a015 100644 --- a/packages/rrweb/tsconfig.json +++ b/packages/rrweb/tsconfig.json @@ -11,7 +11,8 @@ "outDir": "build", "lib": [ "es6", - "dom" + "dom", + "es2021.weakref" ], "downlevelIteration": true, "importsNotUsedAsValues": "error", From 9cf2b7d561a9c573d622995d0ba39a612daa3caa Mon Sep 17 00:00:00 2001 From: p-mazhnik Date: Fri, 15 Mar 2024 00:54:29 +0000 Subject: [PATCH 02/34] Apply formatting changes --- .../rrweb/src/record/observers/canvas/canvas-manager.ts | 5 ++++- packages/rrweb/test/integration.test.ts | 8 +++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts index 4ede3efa3a..6b093a6866 100644 --- a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts +++ b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts @@ -68,7 +68,10 @@ export class CanvasManager { this.shadowDoms = new Set(); this.worker = null; this.snapshotInProgressMap = new Map(); - if (this.options.recordCanvas && typeof this.options.sampling === 'number') { + if ( + this.options.recordCanvas && + typeof this.options.sampling === 'number' + ) { this.worker = this.initFPSWorker(); } } diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts index 34eb5d9b63..f359ded464 100644 --- a/packages/rrweb/test/integration.test.ts +++ b/packages/rrweb/test/integration.test.ts @@ -14,7 +14,13 @@ import { stripBase64, } from './utils'; import type { recordOptions } from '../src/types'; -import { eventWithTime, EventType, RecordPlugin, IncrementalSource, CanvasContext } from '@rrweb/types'; +import { + eventWithTime, + EventType, + RecordPlugin, + IncrementalSource, + CanvasContext, +} from '@rrweb/types'; import { visitSnapshot, NodeType } from 'rrweb-snapshot'; describe('record integration tests', function (this: ISuite) { From b817c826c2ea3832f97290c21fd78f1d3d37956b Mon Sep 17 00:00:00 2001 From: p-mazhnik Date: Fri, 15 Mar 2024 03:54:55 +0300 Subject: [PATCH 03/34] add changeset --- .changeset/friendly-zebras-relax.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/friendly-zebras-relax.md diff --git a/.changeset/friendly-zebras-relax.md b/.changeset/friendly-zebras-relax.md new file mode 100644 index 0000000000..99b2084c1f --- /dev/null +++ b/.changeset/friendly-zebras-relax.md @@ -0,0 +1,5 @@ +--- +'rrweb': patch +--- + +Support recording canvas in iframe and shadow dom From 498be36271436e40ee78db46697339d283ba017c Mon Sep 17 00:00:00 2001 From: p-mazhnik Date: Fri, 15 Mar 2024 04:22:06 +0300 Subject: [PATCH 04/34] strip base64 from snapshots --- .../rrweb/test/__snapshots__/integration.test.ts.snap | 8 ++++---- packages/rrweb/test/utils.ts | 5 +++-- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap index 0e99df870c..52f6b7e4bc 100644 --- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap +++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap @@ -5338,7 +5338,7 @@ exports[`record integration tests canvas should record canvas within shadow dom \\"attributes\\": { \\"width\\": \\"200\\", \\"height\\": \\"200\\", - \\"rr_dataURL\\": \\"data:image/png;base64,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\\" + \\"rr_dataURL\\": \\"base64-0\\" }, \\"childNodes\\": [], \\"id\\": 8, @@ -5543,7 +5543,7 @@ exports[`record integration tests canvas should record canvas within shadow dom \\"attributes\\": { \\"width\\": \\"200\\", \\"height\\": \\"200\\", - \\"rr_dataURL\\": \\"data:image/png;base64,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\\" + \\"rr_dataURL\\": \\"base64-0\\" }, \\"childNodes\\": [], \\"id\\": 8, @@ -5636,7 +5636,7 @@ exports[`record integration tests canvas should record canvas within shadow dom \\"data\\": [ { \\"rr_type\\": \\"ArrayBuffer\\", - \\"base64\\": \\"base64-0\\" + \\"base64\\": \\"base64-1\\" } ], \\"type\\": \\"image/png\\" @@ -5677,7 +5677,7 @@ exports[`record integration tests canvas should record canvas within shadow dom \\"data\\": [ { \\"rr_type\\": \\"ArrayBuffer\\", - \\"base64\\": \\"base64-1\\" + \\"base64\\": \\"base64-2\\" } ], \\"type\\": \\"image/png\\" diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts index de4a7a480f..af2ce39f52 100644 --- a/packages/rrweb/test/utils.ts +++ b/packages/rrweb/test/utils.ts @@ -336,7 +336,7 @@ export function stripBase64(events: eventWithTime[]) { const newObj: Partial = {}; for (const prop in obj) { const value = obj[prop]; - if (prop === 'base64' && typeof value === 'string') { + if ((prop === 'base64' || prop === 'rr_dataURL') && typeof value === 'string') { let index = base64Strings.indexOf(value); if (index === -1) { index = base64Strings.push(value) - 1; @@ -351,11 +351,12 @@ export function stripBase64(events: eventWithTime[]) { return events.map((evt) => { if ( + evt.type === EventType.FullSnapshot || evt.type === EventType.IncrementalSnapshot && evt.data.source === IncrementalSource.CanvasMutation ) { const newData = walk(evt.data); - return { ...evt, data: newData }; + return { ...evt, data: newData } as eventWithTime; } return evt; }); From 81797e91484b14f5e3bf72616b37cfa529ef2a57 Mon Sep 17 00:00:00 2001 From: p-mazhnik Date: Fri, 15 Mar 2024 01:27:51 +0000 Subject: [PATCH 05/34] Apply formatting changes --- packages/rrweb/test/utils.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts index af2ce39f52..2cab52cb4c 100644 --- a/packages/rrweb/test/utils.ts +++ b/packages/rrweb/test/utils.ts @@ -336,7 +336,10 @@ export function stripBase64(events: eventWithTime[]) { const newObj: Partial = {}; for (const prop in obj) { const value = obj[prop]; - if ((prop === 'base64' || prop === 'rr_dataURL') && typeof value === 'string') { + if ( + (prop === 'base64' || prop === 'rr_dataURL') && + typeof value === 'string' + ) { let index = base64Strings.indexOf(value); if (index === -1) { index = base64Strings.push(value) - 1; @@ -352,8 +355,8 @@ export function stripBase64(events: eventWithTime[]) { return events.map((evt) => { if ( evt.type === EventType.FullSnapshot || - evt.type === EventType.IncrementalSnapshot && - evt.data.source === IncrementalSource.CanvasMutation + (evt.type === EventType.IncrementalSnapshot && + evt.data.source === IncrementalSource.CanvasMutation) ) { const newData = walk(evt.data); return { ...evt, data: newData } as eventWithTime; From 353f6a7969dcd560d76e4d292332b2e9ae2270f1 Mon Sep 17 00:00:00 2001 From: p-mazhnik Date: Fri, 15 Mar 2024 04:34:48 +0300 Subject: [PATCH 06/34] strip base64 from snapshots --- packages/rrweb/test/__snapshots__/integration.test.ts.snap | 2 +- packages/rrweb/test/utils.ts | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap index 52f6b7e4bc..64a1c64ad4 100644 --- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap +++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap @@ -5182,7 +5182,7 @@ exports[`record integration tests canvas should record canvas within iframe 1`] \\"width\\": \\"200\\", \\"height\\": \\"100\\", \\"style\\": \\"border: 1px solid #000000;\\", - \\"rr_dataURL\\": \\"data:image/png;base64,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\\" + \\"rr_dataURL\\": \\"base64-0\\" }, \\"childNodes\\": [ { diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts index 2cab52cb4c..dc79ba49b8 100644 --- a/packages/rrweb/test/utils.ts +++ b/packages/rrweb/test/utils.ts @@ -355,8 +355,7 @@ export function stripBase64(events: eventWithTime[]) { return events.map((evt) => { if ( evt.type === EventType.FullSnapshot || - (evt.type === EventType.IncrementalSnapshot && - evt.data.source === IncrementalSource.CanvasMutation) + evt.type === EventType.IncrementalSnapshot ) { const newData = walk(evt.data); return { ...evt, data: newData } as eventWithTime; From 3ebf87c55391bfcc8e9bdaae5ad2d5126498f2bb Mon Sep 17 00:00:00 2001 From: p-mazhnik Date: Fri, 15 Mar 2024 13:34:59 +0300 Subject: [PATCH 07/34] cleanup --- .../rrweb/src/record/observers/canvas/canvas-manager.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts index 6b093a6866..64de69ed1a 100644 --- a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts +++ b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts @@ -225,7 +225,7 @@ export class CanvasManager { const getCanvas = (): HTMLCanvasElement[] => { const matchedCanvas: HTMLCanvasElement[] = []; - const traverseDom = (root: Document | ShadowRoot) => { + const searchCanvas = (root: Document | ShadowRoot) => { root.querySelectorAll('canvas').forEach((canvas) => { if (!isBlocked(canvas, blockClass, blockSelector, true)) { matchedCanvas.push(canvas); @@ -235,13 +235,13 @@ export class CanvasManager { for (const item of this.windows) { const window = item.deref(); if (window) { - traverseDom(window.document); + searchCanvas(window.document); } } for (const item of this.shadowDoms) { const shadowRoot = item.deref(); if (shadowRoot) { - traverseDom(shadowRoot); + searchCanvas(shadowRoot); } } return matchedCanvas; From 31bb274f90345fc4223fce460bcec5199719aea0 Mon Sep 17 00:00:00 2001 From: Daniel Engelke Date: Fri, 26 Apr 2024 15:42:56 +1000 Subject: [PATCH 08/34] Remove worker --- .../record/observers/canvas/canvas-manager.ts | 165 +++++++----------- .../workers/image-bitmap-data-url-worker.ts | 89 ---------- .../rrweb/src/record/workers/tsconfig.json | 7 - .../rrweb/src/record/workers/workers.d.ts | 4 - yarn.lock | 7 +- 5 files changed, 68 insertions(+), 204 deletions(-) delete mode 100644 packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts delete mode 100644 packages/rrweb/src/record/workers/tsconfig.json delete mode 100644 packages/rrweb/src/record/workers/workers.d.ts diff --git a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts index 3926f3f35e..c748a32860 100644 --- a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts +++ b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts @@ -1,4 +1,5 @@ -import type { ICanvas, Mirror, DataURLOptions } from 'rrweb-snapshot'; +import { encode } from 'base64-arraybuffer'; +import type { Mirror, DataURLOptions } from 'rrweb-snapshot'; import type { blockClass, canvasManagerMutationCallback, @@ -12,10 +13,7 @@ import type { import { isBlocked } from '../../../utils'; import { CanvasContext } from '@rrweb/types'; import initCanvas2DMutationObserver from './2d'; -import initCanvasContextObserver from './canvas'; import initCanvasWebGLMutationObserver from './webgl'; -import ImageBitmapDataURLWorker from 'web-worker:../../workers/image-bitmap-data-url-worker.ts'; -import type { ImageBitmapDataURLRequestWorker } from '../../workers/image-bitmap-data-url-worker'; export type RafStamps = { latestId: number; invokeId: number | null }; @@ -51,7 +49,6 @@ export class CanvasManager { private locked = false; private snapshotInProgressMap: Map = new Map(); - private worker: ImageBitmapDataURLRequestWorker | null = null; public reset() { this.pendingCanvasMutations.clear(); @@ -66,14 +63,7 @@ export class CanvasManager { this.windowsSet = new WeakSet(); this.windows = []; this.shadowDoms = new Set(); - this.worker = null; this.snapshotInProgressMap = new Map(); - if ( - this.options.recordCanvas && - typeof this.options.sampling === 'number' - ) { - this.worker = this.initFPSWorker(); - } } public freeze() { @@ -110,7 +100,6 @@ export class CanvasManager { this.startPendingCanvasMutationFlusher(); } if (recordCanvas && typeof sampling === 'number') { - this.worker = this.initFPSWorker(); this.initCanvasFPSObserver(sampling, blockClass, blockSelector, { dataURLOptions, }); @@ -130,17 +119,6 @@ export class CanvasManager { if (recordCanvas && sampling === 'all') { this.initCanvasMutationObserver(win, blockClass, blockSelector); } - if (recordCanvas && typeof sampling === 'number') { - const canvasContextReset = initCanvasContextObserver( - win, - blockClass, - blockSelector, - true, - ); - this.restoreHandlers.push(() => { - canvasContextReset(); - }); - } this.windowsSet.add(win); this.windows.push(new WeakRef(win)); } @@ -153,47 +131,6 @@ export class CanvasManager { this.shadowDoms = new Set(); } - private initFPSWorker(): ImageBitmapDataURLRequestWorker { - const worker = - new ImageBitmapDataURLWorker() as ImageBitmapDataURLRequestWorker; - worker.onmessage = (e) => { - const { id } = e.data; - this.snapshotInProgressMap.set(id, false); - - if (!('base64' in e.data)) return; - - const { base64, type, width, height } = e.data; - this.mutationCb({ - id, - type: CanvasContext['2D'], - commands: [ - { - property: 'clearRect', // wipe canvas - args: [0, 0, width, height], - }, - { - property: 'drawImage', // draws (semi-transparent) image - args: [ - { - rr_type: 'ImageBitmap', - args: [ - { - rr_type: 'Blob', - data: [{ rr_type: 'ArrayBuffer', base64 }], - type, - }, - ], - } as CanvasArg, - 0, - 0, - ], - }, - ], - }); - }; - return worker; - } - private processMutation: canvasManagerMutationCallback = ( target, mutation, @@ -221,6 +158,8 @@ export class CanvasManager { ) { const timeBetweenSnapshots = 1000 / fps; let lastSnapshotTime = 0; + const lastBlobMap: Map = new Map(); + const transparentBlobMap: Map = new Map(); let rafId: number; const getCanvas = (): HTMLCanvasElement[] => { @@ -247,6 +186,26 @@ export class CanvasManager { return matchedCanvas; }; + async function getTransparentBlobFor( + width: number, + height: number, + dataURLOptions: DataURLOptions, + ): Promise { + const id = `${width}-${height}`; + if ('OffscreenCanvas' in globalThis) { + if (transparentBlobMap.has(id)) return transparentBlobMap.get(id)!; + const offscreen = new OffscreenCanvas(width, height); + offscreen.getContext('2d'); // creates rendering context for `converToBlob` + const blob = await offscreen.convertToBlob(dataURLOptions); // takes a while + const arrayBuffer = await blob.arrayBuffer(); + const base64 = encode(arrayBuffer); // cpu intensive + transparentBlobMap.set(id, base64); + return base64; + } else { + return ''; + } + } + const takeCanvasSnapshots = (timestamp: DOMHighResTimeStamp) => { if (!this.windows.length) { // exit loop if windows list is empty @@ -276,39 +235,46 @@ export class CanvasManager { if (canvas.width === 0 || canvas.height === 0) return; this.snapshotInProgressMap.set(id, true); - if (['webgl', 'webgl2'].includes((canvas as ICanvas).__context)) { - // if the canvas hasn't been modified recently, - // its contents won't be in memory and `createImageBitmap` - // will return a transparent imageBitmap - - const context = canvas.getContext((canvas as ICanvas).__context) as - | WebGLRenderingContext - | WebGL2RenderingContext - | null; - if ( - context?.getContextAttributes()?.preserveDrawingBuffer === false - ) { - // Hack to load canvas back into memory so `createImageBitmap` can grab it's contents. - // Context: https://twitter.com/Juice10/status/1499775271758704643 - // Preferably we set `preserveDrawingBuffer` to true, but that's not always possible, - // especially when canvas is loaded before rrweb. - // This hack can wipe the background color of the canvas in the (unlikely) event that - // the canvas background was changed but clear was not called directly afterwards. - // Example of this hack having negative side effect: https://visgl.github.io/react-map-gl/examples/layers - context.clear(context.COLOR_BUFFER_BIT); - } + + const blob: Blob = await new Promise((resolve) => canvas.toBlob(file => resolve(file!), options.dataURLOptions.type, options.dataURLOptions.quality)); + const type = blob.type; + const arrayBuffer = await blob.arrayBuffer(); + const base64 = encode(arrayBuffer); // cpu intensive // TODO in post processing + + this.snapshotInProgressMap.set(id, false); + if (!lastBlobMap.has(id) && (await getTransparentBlobFor(canvas.width, canvas.height, options.dataURLOptions)) === base64) { + lastBlobMap.set(id, base64); } - const bitmap = await createImageBitmap(canvas); - this.worker?.postMessage( - { + if (lastBlobMap.get(id) !== base64) { + this.mutationCb({ id, - bitmap, - width: canvas.width, - height: canvas.height, - dataURLOptions: options.dataURLOptions, - }, - [bitmap], - ); + type: CanvasContext['2D'], + commands: [ + { + property: 'clearRect', // wipe canvas + args: [0, 0, canvas.width, canvas.height], + }, + { + property: 'drawImage', // draws (semi-transparent) image + args: [ + { + rr_type: 'ImageBitmap', + args: [ + { + rr_type: 'Blob', + data: [{ rr_type: 'ArrayBuffer', base64 }], + type, + }, + ], + } as CanvasArg, + 0, + 0, + ], + }, + ], + }); + lastBlobMap.set(id, base64); + } }); rafId = requestAnimationFrame(takeCanvasSnapshots); }; @@ -325,12 +291,6 @@ export class CanvasManager { blockClass: blockClass, blockSelector: string | null, ): void { - const canvasContextReset = initCanvasContextObserver( - win, - blockClass, - blockSelector, - false, - ); const canvas2DReset = initCanvas2DMutationObserver( this.processMutation.bind(this), win, @@ -347,7 +307,6 @@ export class CanvasManager { ); this.restoreHandlers.push(() => { - canvasContextReset(); canvas2DReset(); canvasWebGL1and2Reset(); }); diff --git a/packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts b/packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts deleted file mode 100644 index 374edfe1b0..0000000000 --- a/packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { encode } from 'base64-arraybuffer'; -import type { DataURLOptions } from 'rrweb-snapshot'; -import type { - ImageBitmapDataURLWorkerParams, - ImageBitmapDataURLWorkerResponse, -} from '@rrweb/types'; - -const lastBlobMap: Map = new Map(); -const transparentBlobMap: Map = new Map(); - -export interface ImageBitmapDataURLRequestWorker { - postMessage: ( - message: ImageBitmapDataURLWorkerParams, - transfer?: [ImageBitmap], - ) => void; - onmessage: (message: MessageEvent) => void; -} - -interface ImageBitmapDataURLResponseWorker { - onmessage: - | null - | ((message: MessageEvent) => void); - postMessage(e: ImageBitmapDataURLWorkerResponse): void; -} - -async function getTransparentBlobFor( - width: number, - height: number, - dataURLOptions: DataURLOptions, -): Promise { - const id = `${width}-${height}`; - if ('OffscreenCanvas' in globalThis) { - if (transparentBlobMap.has(id)) return transparentBlobMap.get(id)!; - const offscreen = new OffscreenCanvas(width, height); - offscreen.getContext('2d'); // creates rendering context for `converToBlob` - const blob = await offscreen.convertToBlob(dataURLOptions); // takes a while - const arrayBuffer = await blob.arrayBuffer(); - const base64 = encode(arrayBuffer); // cpu intensive - transparentBlobMap.set(id, base64); - return base64; - } else { - return ''; - } -} - -// `as any` because: https://github.com/Microsoft/TypeScript/issues/20595 -const worker: ImageBitmapDataURLResponseWorker = self; - -// eslint-disable-next-line @typescript-eslint/no-misused-promises -worker.onmessage = async function (e) { - if ('OffscreenCanvas' in globalThis) { - const { id, bitmap, width, height, dataURLOptions } = e.data; - - const transparentBase64 = getTransparentBlobFor( - width, - height, - dataURLOptions, - ); - - const offscreen = new OffscreenCanvas(width, height); - const ctx = offscreen.getContext('2d')!; - - ctx.drawImage(bitmap, 0, 0); - bitmap.close(); - const blob = await offscreen.convertToBlob(dataURLOptions); // takes a while - const type = blob.type; - const arrayBuffer = await blob.arrayBuffer(); - const base64 = encode(arrayBuffer); // cpu intensive - - // on first try we should check if canvas is transparent, - // no need to save it's contents in that case - if (!lastBlobMap.has(id) && (await transparentBase64) === base64) { - lastBlobMap.set(id, base64); - return worker.postMessage({ id }); - } - - if (lastBlobMap.get(id) === base64) return worker.postMessage({ id }); // unchanged - worker.postMessage({ - id, - type, - base64, - width, - height, - }); - lastBlobMap.set(id, base64); - } else { - return worker.postMessage({ id: e.data.id }); - } -}; diff --git a/packages/rrweb/src/record/workers/tsconfig.json b/packages/rrweb/src/record/workers/tsconfig.json deleted file mode 100644 index cf0e05cb8e..0000000000 --- a/packages/rrweb/src/record/workers/tsconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "../../../tsconfig.json", - "compilerOptions": { - "lib": ["webworker"] - }, - "exclude": ["workers.d.ts"] -} diff --git a/packages/rrweb/src/record/workers/workers.d.ts b/packages/rrweb/src/record/workers/workers.d.ts deleted file mode 100644 index ead3d9e1f4..0000000000 --- a/packages/rrweb/src/record/workers/workers.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -declare module 'web-worker:*' { - const WorkerFactory: new () => Worker; - export default WorkerFactory; -} diff --git a/yarn.lock b/yarn.lock index 40f8fd25f3..7a2e073638 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5564,10 +5564,15 @@ csso@^4.0.2: dependencies: css-tree "^1.1.2" -cssom@^0.4.4, cssom@^0.5.0, "cssom@https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz": +cssom@^0.4.4, "cssom@https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz": version "0.6.0" resolved "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz#ed298055b97cbddcdeb278f904857629dec5e0e1" +cssom@^0.5.0: + version "0.5.0" + resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36" + integrity sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw== + cssom@~0.3.6: version "0.3.8" resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a" From f3a169db04df6e65157ffd73a90c5ce99c7715bc Mon Sep 17 00:00:00 2001 From: Daniel Engelke Date: Fri, 26 Apr 2024 16:08:34 +1000 Subject: [PATCH 09/34] Update types package --- .changeset/config.json | 2 +- .changeset/pre.json | 2 +- packages/rrdom/package.json | 2 +- packages/rrdom/src/diff.ts | 2 +- packages/rrdom/src/index.ts | 2 +- packages/rrdom/test/diff.test.ts | 4 ++-- packages/rrvideo/package.json | 2 +- packages/rrvideo/src/index.ts | 2 +- packages/rrvideo/test/events/example.ts | 4 ++-- packages/rrweb-player/package.json | 2 +- packages/rrweb-player/src/main.ts | 2 +- packages/rrweb-player/src/utils.ts | 2 +- packages/rrweb-player/typings/index.d.ts | 2 +- packages/rrweb/package.json | 2 +- packages/rrweb/src/index.ts | 2 +- packages/rrweb/src/packer/base.ts | 2 +- packages/rrweb/src/packer/unpack.ts | 2 +- .../src/plugins/canvas-webrtc/record/index.ts | 2 +- .../rrweb/src/plugins/console/record/index.ts | 2 +- .../rrweb/src/plugins/console/replay/index.ts | 4 ++-- .../src/plugins/sequential-id/record/index.ts | 2 +- .../src/plugins/sequential-id/replay/index.ts | 2 +- .../src/record/cross-origin-iframe-mirror.ts | 2 +- packages/rrweb/src/record/iframe-manager.ts | 4 ++-- packages/rrweb/src/record/index.ts | 2 +- packages/rrweb/src/record/mutation.ts | 2 +- packages/rrweb/src/record/observer.ts | 2 +- packages/rrweb/src/record/observers/canvas/2d.ts | 2 +- .../record/observers/canvas/canvas-manager.ts | 4 ++-- .../rrweb/src/record/observers/canvas/canvas.ts | 2 +- .../record/observers/canvas/serialize-args.ts | 2 +- .../rrweb/src/record/observers/canvas/webgl.ts | 2 +- packages/rrweb/src/record/shadow-dom-manager.ts | 2 +- packages/rrweb/src/record/stylesheet-manager.ts | 2 +- packages/rrweb/src/replay/canvas/2d.ts | 2 +- .../rrweb/src/replay/canvas/deserialize-args.ts | 2 +- packages/rrweb/src/replay/canvas/index.ts | 2 +- packages/rrweb/src/replay/canvas/webgl.ts | 2 +- packages/rrweb/src/replay/index.ts | 2 +- packages/rrweb/src/replay/machine.ts | 2 +- packages/rrweb/src/replay/media/index.ts | 4 ++-- packages/rrweb/src/replay/timer.ts | 2 +- packages/rrweb/src/types.ts | 2 +- packages/rrweb/src/utils.ts | 2 +- .../rrweb/test/benchmark/dom-mutation.test.ts | 2 +- .../test/benchmark/replay-fast-forward.test.ts | 2 +- packages/rrweb/test/e2e/webgl.test.ts | 2 +- .../events/adopted-style-sheet-modification.ts | 4 ++-- .../rrweb/test/events/adopted-style-sheet.ts | 4 ++-- packages/rrweb/test/events/bad-textarea.ts | 4 ++-- packages/rrweb/test/events/canvas-in-iframe.ts | 4 ++-- .../test/events/custom-element-define-class.ts | 4 ++-- .../rrweb/test/events/document-replacement.ts | 4 ++-- packages/rrweb/test/events/hover.ts | 2 +- .../rrweb/test/events/iframe-shadowdom-hover.ts | 4 ++-- packages/rrweb/test/events/iframe.ts | 4 ++-- packages/rrweb/test/events/input.ts | 4 ++-- packages/rrweb/test/events/ordering.ts | 4 ++-- .../test/events/scroll-with-parent-styles.ts | 4 ++-- packages/rrweb/test/events/scroll.ts | 4 ++-- packages/rrweb/test/events/selection.ts | 4 ++-- packages/rrweb/test/events/shadow-dom.ts | 4 ++-- .../rrweb/test/events/style-sheet-rule-events.ts | 4 ++-- .../test/events/style-sheet-text-mutation.ts | 4 ++-- .../events/video-playback-on-full-snapshot.ts | 2 +- packages/rrweb/test/events/video-playback.ts | 2 +- packages/rrweb/test/integration.test.ts | 2 +- packages/rrweb/test/machine.test.ts | 2 +- packages/rrweb/test/packer.test.ts | 2 +- packages/rrweb/test/record.test.ts | 2 +- .../test/record/cross-origin-iframes.test.ts | 4 ++-- packages/rrweb/test/record/error-handler.test.ts | 2 +- packages/rrweb/test/record/webgl.test.ts | 2 +- .../rrweb/test/replay/preload-all-images.test.ts | 2 +- .../rrweb/test/replay/webgl-mutation.test.ts | 2 +- packages/rrweb/test/replayer.test.ts | 2 +- packages/rrweb/test/utils.ts | 2 +- packages/types/package.json | 16 ++++++++-------- packages/web-extension/package.json | 2 +- packages/web-extension/src/background/index.ts | 2 +- packages/web-extension/src/content/index.ts | 2 +- packages/web-extension/src/content/inject.ts | 2 +- packages/web-extension/src/types.ts | 2 +- packages/web-extension/src/utils/recording.ts | 2 +- packages/web-extension/src/utils/storage.ts | 2 +- yarn.lock | 7 +------ 86 files changed, 116 insertions(+), 121 deletions(-) diff --git a/.changeset/config.json b/.changeset/config.json index 962e9799b0..e5821b6a8b 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -9,7 +9,7 @@ "rrdom", "rrdom-nodejs", "rrweb-player", - "@rrweb/types", + "howdygo-rrweb-types", "@rrweb/web-extension", "rrvideo" ] diff --git a/.changeset/pre.json b/.changeset/pre.json index f752b6ec00..c0804ca5c1 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -7,7 +7,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", + "howdygo-rrweb-types": "2.0.0-alpha.4", "@rrweb/web-extension": "2.0.0-alpha.4", "rrvideo": "2.0.0-alpha.6" }, diff --git a/packages/rrdom/package.json b/packages/rrdom/package.json index 430620782c..294418c930 100644 --- a/packages/rrdom/package.json +++ b/packages/rrdom/package.json @@ -32,7 +32,7 @@ }, "devDependencies": { "@rollup/plugin-commonjs": "^20.0.0", - "@rrweb/types": "^2.0.0-alpha.13", + "howdygo-rrweb-types": "^2.0.0-alpha.13", "@types/jest": "^27.4.1", "@types/puppeteer": "^5.4.4", "@typescript-eslint/eslint-plugin": "^5.23.0", diff --git a/packages/rrdom/src/diff.ts b/packages/rrdom/src/diff.ts index 8ccf81f8c6..c67ab9f8a0 100644 --- a/packages/rrdom/src/diff.ts +++ b/packages/rrdom/src/diff.ts @@ -10,7 +10,7 @@ import type { scrollData, styleDeclarationData, styleSheetRuleData, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; import type { IRRCDATASection, IRRComment, diff --git a/packages/rrdom/src/index.ts b/packages/rrdom/src/index.ts index eeddb03e1c..236c995b78 100644 --- a/packages/rrdom/src/index.ts +++ b/packages/rrdom/src/index.ts @@ -14,7 +14,7 @@ import type { scrollData, styleSheetRuleData, styleDeclarationData, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; import { BaseRRNode as RRNode, BaseRRCDATASectionImpl, diff --git a/packages/rrdom/test/diff.test.ts b/packages/rrdom/test/diff.test.ts index fc76f48bd9..0585284a21 100644 --- a/packages/rrdom/test/diff.test.ts +++ b/packages/rrdom/test/diff.test.ts @@ -31,8 +31,8 @@ import type { canvasMutationData, styleDeclarationData, styleSheetRuleData, -} from '@rrweb/types'; -import { EventType, IncrementalSource } from '@rrweb/types'; +} from 'howdygo-rrweb-types'; +import { EventType, IncrementalSource } from 'howdygo-rrweb-types'; import { compileTSCode } from './utils'; const elementSn = { diff --git a/packages/rrvideo/package.json b/packages/rrvideo/package.json index 4cbd92463d..51a9356248 100644 --- a/packages/rrvideo/package.json +++ b/packages/rrvideo/package.json @@ -26,7 +26,7 @@ "@types/node": "^18.15.11", "jest": "^27.5.1", "ts-jest": "^27.1.3", - "@rrweb/types": "^2.0.0-alpha.13" + "howdygo-rrweb-types": "^2.0.0-alpha.13" }, "dependencies": { "@open-tech-world/cli-progress-bar": "^2.0.2", diff --git a/packages/rrvideo/src/index.ts b/packages/rrvideo/src/index.ts index 0909746929..e56dacb465 100644 --- a/packages/rrvideo/src/index.ts +++ b/packages/rrvideo/src/index.ts @@ -1,7 +1,7 @@ import * as fs from 'fs-extra'; import * as path from 'path'; import { chromium } from 'playwright'; -import { EventType, eventWithTime } from '@rrweb/types'; +import { EventType, eventWithTime } from 'howdygo-rrweb-types'; import type { RRwebPlayerOptions } from 'rrweb-player'; const rrwebScriptPath = path.resolve( diff --git a/packages/rrvideo/test/events/example.ts b/packages/rrvideo/test/events/example.ts index 00701fd6ca..22f9c7bea2 100644 --- a/packages/rrvideo/test/events/example.ts +++ b/packages/rrvideo/test/events/example.ts @@ -1,5 +1,5 @@ -import { EventType, IncrementalSource } from '@rrweb/types'; -import type { eventWithTime } from '@rrweb/types'; +import { EventType, IncrementalSource } from 'howdygo-rrweb-types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; const now = Date.now(); const events: eventWithTime[] = [ diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json index da8cba206a..cd4ae30ac9 100644 --- a/packages/rrweb-player/package.json +++ b/packages/rrweb-player/package.json @@ -4,7 +4,7 @@ "devDependencies": { "@rollup/plugin-commonjs": "^22.0.0", "@rollup/plugin-node-resolve": "^13.2.1", - "@rrweb/types": "^2.0.0-alpha.13", + "howdygo-rrweb-types": "^2.0.0-alpha.13", "@types/offscreencanvas": "^2019.6.4", "eslint-config-google": "^0.14.0", "eslint-plugin-svelte3": "^4.0.0", diff --git a/packages/rrweb-player/src/main.ts b/packages/rrweb-player/src/main.ts index df0568912d..82eb5e90aa 100644 --- a/packages/rrweb-player/src/main.ts +++ b/packages/rrweb-player/src/main.ts @@ -1,4 +1,4 @@ -import type { eventWithTime } from '@rrweb/types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; import _Player from './Player.svelte'; type PlayerProps = { diff --git a/packages/rrweb-player/src/utils.ts b/packages/rrweb-player/src/utils.ts index 08146bd253..4cf33e452e 100644 --- a/packages/rrweb-player/src/utils.ts +++ b/packages/rrweb-player/src/utils.ts @@ -16,7 +16,7 @@ declare global { } import { EventType, IncrementalSource } from 'rrweb'; -import type { eventWithTime } from '@rrweb/types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; export function inlineCss(cssObj: Record): string { let style = ''; diff --git a/packages/rrweb-player/typings/index.d.ts b/packages/rrweb-player/typings/index.d.ts index e76b493e6f..acb2a20d8d 100755 --- a/packages/rrweb-player/typings/index.d.ts +++ b/packages/rrweb-player/typings/index.d.ts @@ -1,5 +1,5 @@ import { playerConfig } from 'rrweb/typings/types'; -import { eventWithTime } from '@rrweb/types'; +import { eventWithTime } from 'howdygo-rrweb-types'; import { Replayer } from 'rrweb'; import { Mirror } from 'rrweb-snapshot'; import { SvelteComponent } from 'svelte'; diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json index 9fcf6bb5a6..e002148f2d 100644 --- a/packages/rrweb/package.json +++ b/packages/rrweb/package.json @@ -82,7 +82,7 @@ "tslib": "^2.3.1" }, "dependencies": { - "@rrweb/types": "^2.0.0-alpha.13", + "howdygo-rrweb-types": "^2.0.0-alpha.13", "@types/css-font-loading-module": "0.0.7", "@xstate/fsm": "^1.4.0", "base64-arraybuffer": "^1.0.1", diff --git a/packages/rrweb/src/index.ts b/packages/rrweb/src/index.ts index 446d773f04..ec5fa033bc 100644 --- a/packages/rrweb/src/index.ts +++ b/packages/rrweb/src/index.ts @@ -10,7 +10,7 @@ export { MouseInteractions, ReplayerEvents, type eventWithTime, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; export type { recordOptions } from './types'; diff --git a/packages/rrweb/src/packer/base.ts b/packages/rrweb/src/packer/base.ts index ac6ee9a337..efd35f609c 100644 --- a/packages/rrweb/src/packer/base.ts +++ b/packages/rrweb/src/packer/base.ts @@ -1,4 +1,4 @@ -import type { eventWithTime } from '@rrweb/types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; export type PackFn = (event: eventWithTime) => string; export type UnpackFn = (raw: string) => eventWithTime; diff --git a/packages/rrweb/src/packer/unpack.ts b/packages/rrweb/src/packer/unpack.ts index 0c4bf252d1..a8bda7975d 100644 --- a/packages/rrweb/src/packer/unpack.ts +++ b/packages/rrweb/src/packer/unpack.ts @@ -1,6 +1,6 @@ import { strFromU8, strToU8, unzlibSync } from 'fflate'; import { UnpackFn, eventWithTimeAndPacker, MARK } from './base'; -import type { eventWithTime } from '@rrweb/types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; export const unpack: UnpackFn = (raw: string) => { if (typeof raw !== 'string') { diff --git a/packages/rrweb/src/plugins/canvas-webrtc/record/index.ts b/packages/rrweb/src/plugins/canvas-webrtc/record/index.ts index 03aad10c9c..56fe5978da 100644 --- a/packages/rrweb/src/plugins/canvas-webrtc/record/index.ts +++ b/packages/rrweb/src/plugins/canvas-webrtc/record/index.ts @@ -1,6 +1,6 @@ import type { Mirror } from 'rrweb-snapshot'; import SimplePeer from 'simple-peer-light'; -import type { RecordPlugin, ICrossOriginIframeMirror } from '@rrweb/types'; +import type { RecordPlugin, ICrossOriginIframeMirror } from 'howdygo-rrweb-types'; import type { WebRTCDataChannel } from '../types'; export const PLUGIN_NAME = 'rrweb/canvas-webrtc@1'; diff --git a/packages/rrweb/src/plugins/console/record/index.ts b/packages/rrweb/src/plugins/console/record/index.ts index a3bd4d3843..70a3638ec0 100644 --- a/packages/rrweb/src/plugins/console/record/index.ts +++ b/packages/rrweb/src/plugins/console/record/index.ts @@ -1,4 +1,4 @@ -import type { listenerHandler, RecordPlugin, IWindow } from '@rrweb/types'; +import type { listenerHandler, RecordPlugin, IWindow } from 'howdygo-rrweb-types'; import { patch } from '../../../utils'; import { ErrorStackParser, StackFrame } from './error-stack-parser'; import { stringify } from './stringify'; diff --git a/packages/rrweb/src/plugins/console/replay/index.ts b/packages/rrweb/src/plugins/console/replay/index.ts index a0915fa6af..b1c68c6fe3 100644 --- a/packages/rrweb/src/plugins/console/replay/index.ts +++ b/packages/rrweb/src/plugins/console/replay/index.ts @@ -1,6 +1,6 @@ import { LogLevel, LogData, PLUGIN_NAME } from '../record'; -import type { eventWithTime } from '@rrweb/types'; -import { EventType, IncrementalSource } from '@rrweb/types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; +import { EventType, IncrementalSource } from 'howdygo-rrweb-types'; import type { ReplayPlugin } from '../../../types'; /** diff --git a/packages/rrweb/src/plugins/sequential-id/record/index.ts b/packages/rrweb/src/plugins/sequential-id/record/index.ts index 140b9c7003..64b469a2b2 100644 --- a/packages/rrweb/src/plugins/sequential-id/record/index.ts +++ b/packages/rrweb/src/plugins/sequential-id/record/index.ts @@ -1,4 +1,4 @@ -import type { RecordPlugin } from '@rrweb/types'; +import type { RecordPlugin } from 'howdygo-rrweb-types'; export type SequentialIdOptions = { key: string; diff --git a/packages/rrweb/src/plugins/sequential-id/replay/index.ts b/packages/rrweb/src/plugins/sequential-id/replay/index.ts index 0f3d94b820..c2f658793e 100644 --- a/packages/rrweb/src/plugins/sequential-id/replay/index.ts +++ b/packages/rrweb/src/plugins/sequential-id/replay/index.ts @@ -1,6 +1,6 @@ import type { SequentialIdOptions } from '../record'; import type { ReplayPlugin } from '../../../types'; -import type { eventWithTime } from '@rrweb/types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; type Options = SequentialIdOptions & { warnOnMissingId: boolean; diff --git a/packages/rrweb/src/record/cross-origin-iframe-mirror.ts b/packages/rrweb/src/record/cross-origin-iframe-mirror.ts index 4e7a69326e..e378baa7cc 100644 --- a/packages/rrweb/src/record/cross-origin-iframe-mirror.ts +++ b/packages/rrweb/src/record/cross-origin-iframe-mirror.ts @@ -1,4 +1,4 @@ -import type { ICrossOriginIframeMirror } from '@rrweb/types'; +import type { ICrossOriginIframeMirror } from 'howdygo-rrweb-types'; export default class CrossOriginIframeMirror implements ICrossOriginIframeMirror { diff --git a/packages/rrweb/src/record/iframe-manager.ts b/packages/rrweb/src/record/iframe-manager.ts index 2d9205c0cb..dd0855eb8e 100644 --- a/packages/rrweb/src/record/iframe-manager.ts +++ b/packages/rrweb/src/record/iframe-manager.ts @@ -2,12 +2,12 @@ import type { Mirror, serializedNodeWithId } from 'rrweb-snapshot'; import { genId, NodeType } from 'rrweb-snapshot'; import type { CrossOriginIframeMessageEvent } from '../types'; import CrossOriginIframeMirror from './cross-origin-iframe-mirror'; -import { EventType, IncrementalSource } from '@rrweb/types'; +import { EventType, IncrementalSource } from 'howdygo-rrweb-types'; import type { eventWithTime, eventWithoutTime, mutationCallBack, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; import type { StylesheetManager } from './stylesheet-manager'; export class IframeManager { diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts index f16d2148b2..cc317382c7 100644 --- a/packages/rrweb/src/record/index.ts +++ b/packages/rrweb/src/record/index.ts @@ -28,7 +28,7 @@ import { canvasMutationParam, adoptedStyleSheetParam, IWindow, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; import type { CrossOriginIframeMessageEventContent } from '../types'; import { IframeManager } from './iframe-manager'; import { ShadowDomManager } from './shadow-dom-manager'; diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts index 12d6068dea..033f0e06d7 100644 --- a/packages/rrweb/src/record/mutation.ts +++ b/packages/rrweb/src/record/mutation.ts @@ -20,7 +20,7 @@ import type { addedNodeMutation, Optional, IWindow, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; import { isBlocked, isAncestorRemoved, diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts index dcd30e4718..98cb7ca4e4 100644 --- a/packages/rrweb/src/record/observer.ts +++ b/packages/rrweb/src/record/observer.ts @@ -47,7 +47,7 @@ import { SelectionRange, selectionCallback, customElementCallback, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; import MutationBuffer from './mutation'; import { callbackWrapper } from './error-handler'; diff --git a/packages/rrweb/src/record/observers/canvas/2d.ts b/packages/rrweb/src/record/observers/canvas/2d.ts index b496b6b93a..f0655efd46 100644 --- a/packages/rrweb/src/record/observers/canvas/2d.ts +++ b/packages/rrweb/src/record/observers/canvas/2d.ts @@ -5,7 +5,7 @@ import { canvasManagerMutationCallback, IWindow, listenerHandler, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; import { hookSetter, isBlocked, patch } from '../../../utils'; import { serializeArgs } from './serialize-args'; diff --git a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts index c748a32860..7b07228755 100644 --- a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts +++ b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts @@ -9,9 +9,9 @@ import type { IWindow, listenerHandler, CanvasArg, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; import { isBlocked } from '../../../utils'; -import { CanvasContext } from '@rrweb/types'; +import { CanvasContext } from 'howdygo-rrweb-types'; import initCanvas2DMutationObserver from './2d'; import initCanvasWebGLMutationObserver from './webgl'; diff --git a/packages/rrweb/src/record/observers/canvas/canvas.ts b/packages/rrweb/src/record/observers/canvas/canvas.ts index 4f6b30fc36..3a60be151e 100644 --- a/packages/rrweb/src/record/observers/canvas/canvas.ts +++ b/packages/rrweb/src/record/observers/canvas/canvas.ts @@ -1,5 +1,5 @@ import type { ICanvas } from 'rrweb-snapshot'; -import type { blockClass, IWindow, listenerHandler } from '@rrweb/types'; +import type { blockClass, IWindow, listenerHandler } from 'howdygo-rrweb-types'; import { isBlocked, patch } from '../../../utils'; function getNormalizedContextName(contextType: string) { diff --git a/packages/rrweb/src/record/observers/canvas/serialize-args.ts b/packages/rrweb/src/record/observers/canvas/serialize-args.ts index 30e20fcb0c..eae0fe8ad2 100644 --- a/packages/rrweb/src/record/observers/canvas/serialize-args.ts +++ b/packages/rrweb/src/record/observers/canvas/serialize-args.ts @@ -1,5 +1,5 @@ import { encode } from 'base64-arraybuffer'; -import type { IWindow, CanvasArg } from '@rrweb/types'; +import type { IWindow, CanvasArg } from 'howdygo-rrweb-types'; // TODO: unify with `replay/webgl.ts` type CanvasVarMap = Map; diff --git a/packages/rrweb/src/record/observers/canvas/webgl.ts b/packages/rrweb/src/record/observers/canvas/webgl.ts index 680890f666..bd3139cc4c 100644 --- a/packages/rrweb/src/record/observers/canvas/webgl.ts +++ b/packages/rrweb/src/record/observers/canvas/webgl.ts @@ -6,7 +6,7 @@ import { canvasMutationWithType, IWindow, listenerHandler, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; import { hookSetter, isBlocked, patch } from '../../../utils'; import { saveWebGLVar, serializeArgs } from './serialize-args'; diff --git a/packages/rrweb/src/record/shadow-dom-manager.ts b/packages/rrweb/src/record/shadow-dom-manager.ts index aab52371dd..b1d1fa578a 100644 --- a/packages/rrweb/src/record/shadow-dom-manager.ts +++ b/packages/rrweb/src/record/shadow-dom-manager.ts @@ -3,7 +3,7 @@ import type { mutationCallBack, scrollCallback, SamplingStrategy, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; import { initMutationObserver, initScrollObserver, diff --git a/packages/rrweb/src/record/stylesheet-manager.ts b/packages/rrweb/src/record/stylesheet-manager.ts index 6e0a8077b4..dcf50a34f4 100644 --- a/packages/rrweb/src/record/stylesheet-manager.ts +++ b/packages/rrweb/src/record/stylesheet-manager.ts @@ -5,7 +5,7 @@ import type { adoptedStyleSheetParam, attributeMutation, mutationCallBack, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; import { StyleSheetMirror } from '../utils'; export class StylesheetManager { diff --git a/packages/rrweb/src/replay/canvas/2d.ts b/packages/rrweb/src/replay/canvas/2d.ts index 93d852399d..c170d17867 100644 --- a/packages/rrweb/src/replay/canvas/2d.ts +++ b/packages/rrweb/src/replay/canvas/2d.ts @@ -1,5 +1,5 @@ import type { Replayer } from '../'; -import type { canvasMutationCommand } from '@rrweb/types'; +import type { canvasMutationCommand } from 'howdygo-rrweb-types'; import { deserializeArg } from './deserialize-args'; export default async function canvasMutation({ diff --git a/packages/rrweb/src/replay/canvas/deserialize-args.ts b/packages/rrweb/src/replay/canvas/deserialize-args.ts index a690d7986f..37bce9ee3a 100644 --- a/packages/rrweb/src/replay/canvas/deserialize-args.ts +++ b/packages/rrweb/src/replay/canvas/deserialize-args.ts @@ -1,6 +1,6 @@ import { decode } from 'base64-arraybuffer'; import type { Replayer } from '../'; -import type { CanvasArg, SerializedCanvasArg } from '@rrweb/types'; +import type { CanvasArg, SerializedCanvasArg } from 'howdygo-rrweb-types'; // TODO: add ability to wipe this list type GLVarMap = Map; diff --git a/packages/rrweb/src/replay/canvas/index.ts b/packages/rrweb/src/replay/canvas/index.ts index e4c346d6bc..758744aaab 100644 --- a/packages/rrweb/src/replay/canvas/index.ts +++ b/packages/rrweb/src/replay/canvas/index.ts @@ -4,7 +4,7 @@ import { canvasMutationCommand, canvasMutationData, canvasMutationParam, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; import webglMutation from './webgl'; import canvas2DMutation from './2d'; diff --git a/packages/rrweb/src/replay/canvas/webgl.ts b/packages/rrweb/src/replay/canvas/webgl.ts index 85ff81f8d6..4bcb5dead7 100644 --- a/packages/rrweb/src/replay/canvas/webgl.ts +++ b/packages/rrweb/src/replay/canvas/webgl.ts @@ -1,5 +1,5 @@ import type { Replayer } from '../'; -import { CanvasContext, canvasMutationCommand } from '@rrweb/types'; +import { CanvasContext, canvasMutationCommand } from 'howdygo-rrweb-types'; import { deserializeArg, variableListFor } from './deserialize-args'; function getContext( diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts index 89aa66d933..0397e97a03 100644 --- a/packages/rrweb/src/replay/index.ts +++ b/packages/rrweb/src/replay/index.ts @@ -62,7 +62,7 @@ import { styleSheetRuleData, styleDeclarationData, adoptedStyleSheetData, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; import { polyfill, queueToResolveTrees, diff --git a/packages/rrweb/src/replay/machine.ts b/packages/rrweb/src/replay/machine.ts index 07d948fdca..0fb67a0089 100644 --- a/packages/rrweb/src/replay/machine.ts +++ b/packages/rrweb/src/replay/machine.ts @@ -6,7 +6,7 @@ import { EventType, Emitter, IncrementalSource, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; import { Timer, addDelay } from './timer'; export type PlayerContext = { diff --git a/packages/rrweb/src/replay/media/index.ts b/packages/rrweb/src/replay/media/index.ts index 3c137665df..80e0cc6cdf 100644 --- a/packages/rrweb/src/replay/media/index.ts +++ b/packages/rrweb/src/replay/media/index.ts @@ -1,8 +1,8 @@ -import { Emitter, MediaInteractions, ReplayerEvents } from '@rrweb/types'; +import { Emitter, MediaInteractions, ReplayerEvents } from 'howdygo-rrweb-types'; import type { RRMediaElement } from 'rrdom/es'; import type { createPlayerService, createSpeedService } from '../machine'; import type { Mirror, mediaAttributes } from 'rrweb-snapshot'; -import type { mediaInteractionData } from '@rrweb/types'; +import type { mediaInteractionData } from 'howdygo-rrweb-types'; type MediaState = { isPlaying: boolean; diff --git a/packages/rrweb/src/replay/timer.ts b/packages/rrweb/src/replay/timer.ts index 0d18c3f870..bd50dd383f 100644 --- a/packages/rrweb/src/replay/timer.ts +++ b/packages/rrweb/src/replay/timer.ts @@ -3,7 +3,7 @@ import { eventWithTime, EventType, IncrementalSource, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; export class Timer { public timeOffset = 0; diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts index 10ffb62b43..6485ee170a 100644 --- a/packages/rrweb/src/types.ts +++ b/packages/rrweb/src/types.ts @@ -37,7 +37,7 @@ import type { styleDeclarationCallback, styleSheetRuleCallback, viewportResizeCallback, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; import type ProcessedNodeManager from './record/processed-node-manager'; export type recordOptions = { diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts index f426689d2f..39324dda6f 100644 --- a/packages/rrweb/src/utils.ts +++ b/packages/rrweb/src/utils.ts @@ -8,7 +8,7 @@ import type { IWindow, DeprecatedMirror, textMutation, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; import type { IMirror, Mirror } from 'rrweb-snapshot'; import { isShadowRoot, IGNORED_NODE, classMatchesRegex } from 'rrweb-snapshot'; import type { RRNode, RRIFrameElement } from 'rrdom'; diff --git a/packages/rrweb/test/benchmark/dom-mutation.test.ts b/packages/rrweb/test/benchmark/dom-mutation.test.ts index a4124c3f98..1ef112bb68 100644 --- a/packages/rrweb/test/benchmark/dom-mutation.test.ts +++ b/packages/rrweb/test/benchmark/dom-mutation.test.ts @@ -1,7 +1,7 @@ import * as fs from 'fs'; import * as path from 'path'; import type { Page } from 'puppeteer'; -import type { eventWithTime } from '@rrweb/types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; import type { recordOptions } from '../../src/types'; import { startServer, launchPuppeteer, ISuite, getServerURL } from '../utils'; diff --git a/packages/rrweb/test/benchmark/replay-fast-forward.test.ts b/packages/rrweb/test/benchmark/replay-fast-forward.test.ts index 6fbed1a055..96afa6214a 100644 --- a/packages/rrweb/test/benchmark/replay-fast-forward.test.ts +++ b/packages/rrweb/test/benchmark/replay-fast-forward.test.ts @@ -1,7 +1,7 @@ import * as fs from 'fs'; import * as path from 'path'; import * as https from 'https'; -import type { eventWithTime } from '@rrweb/types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; import type { recordOptions } from '../../src/types'; import { launchPuppeteer, ISuite } from '../utils'; diff --git a/packages/rrweb/test/e2e/webgl.test.ts b/packages/rrweb/test/e2e/webgl.test.ts index 769a6e0784..0b29b52726 100644 --- a/packages/rrweb/test/e2e/webgl.test.ts +++ b/packages/rrweb/test/e2e/webgl.test.ts @@ -13,7 +13,7 @@ import { fakeGoto, } from '../utils'; import type { recordOptions } from '../../src/types'; -import type { eventWithTime } from '@rrweb/types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; import { toMatchImageSnapshot } from 'jest-image-snapshot'; expect.extend({ toMatchImageSnapshot }); diff --git a/packages/rrweb/test/events/adopted-style-sheet-modification.ts b/packages/rrweb/test/events/adopted-style-sheet-modification.ts index fd26ea9c37..f39975b0e9 100644 --- a/packages/rrweb/test/events/adopted-style-sheet-modification.ts +++ b/packages/rrweb/test/events/adopted-style-sheet-modification.ts @@ -1,5 +1,5 @@ -import { EventType, IncrementalSource } from '@rrweb/types'; -import type { eventWithTime } from '@rrweb/types'; +import { EventType, IncrementalSource } from 'howdygo-rrweb-types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; const now = Date.now(); const events: eventWithTime[] = [ diff --git a/packages/rrweb/test/events/adopted-style-sheet.ts b/packages/rrweb/test/events/adopted-style-sheet.ts index 70ddc4305a..517a4b7561 100644 --- a/packages/rrweb/test/events/adopted-style-sheet.ts +++ b/packages/rrweb/test/events/adopted-style-sheet.ts @@ -1,5 +1,5 @@ -import { EventType, IncrementalSource } from '@rrweb/types'; -import type { eventWithTime } from '@rrweb/types'; +import { EventType, IncrementalSource } from 'howdygo-rrweb-types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; const now = Date.now(); diff --git a/packages/rrweb/test/events/bad-textarea.ts b/packages/rrweb/test/events/bad-textarea.ts index ad2a6ebb63..40557f157d 100644 --- a/packages/rrweb/test/events/bad-textarea.ts +++ b/packages/rrweb/test/events/bad-textarea.ts @@ -1,5 +1,5 @@ -import { EventType, IncrementalSource } from '@rrweb/types'; -import type { eventWithTime } from '@rrweb/types'; +import { EventType, IncrementalSource } from 'howdygo-rrweb-types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; const now = Date.now(); const events: eventWithTime[] = [ diff --git a/packages/rrweb/test/events/canvas-in-iframe.ts b/packages/rrweb/test/events/canvas-in-iframe.ts index 28abee2c2e..e5a394cea0 100644 --- a/packages/rrweb/test/events/canvas-in-iframe.ts +++ b/packages/rrweb/test/events/canvas-in-iframe.ts @@ -1,5 +1,5 @@ -import { EventType, IncrementalSource } from '@rrweb/types'; -import type { eventWithTime } from '@rrweb/types'; +import { EventType, IncrementalSource } from 'howdygo-rrweb-types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; const now = Date.now(); diff --git a/packages/rrweb/test/events/custom-element-define-class.ts b/packages/rrweb/test/events/custom-element-define-class.ts index 3f9bd9fa6b..1def45d97c 100644 --- a/packages/rrweb/test/events/custom-element-define-class.ts +++ b/packages/rrweb/test/events/custom-element-define-class.ts @@ -1,5 +1,5 @@ -import { EventType } from '@rrweb/types'; -import type { eventWithTime } from '@rrweb/types'; +import { EventType } from 'howdygo-rrweb-types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; const now = Date.now(); const events: eventWithTime[] = [ diff --git a/packages/rrweb/test/events/document-replacement.ts b/packages/rrweb/test/events/document-replacement.ts index 8b79e7dc9b..2a90dff1f7 100644 --- a/packages/rrweb/test/events/document-replacement.ts +++ b/packages/rrweb/test/events/document-replacement.ts @@ -1,5 +1,5 @@ -import { EventType, IncrementalSource } from '@rrweb/types'; -import type { eventWithTime } from '@rrweb/types'; +import { EventType, IncrementalSource } from 'howdygo-rrweb-types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; const now = Date.now(); const events: eventWithTime[] = [ diff --git a/packages/rrweb/test/events/hover.ts b/packages/rrweb/test/events/hover.ts index 73b2a4ea55..54691e2fad 100644 --- a/packages/rrweb/test/events/hover.ts +++ b/packages/rrweb/test/events/hover.ts @@ -1,4 +1,4 @@ -import { IncrementalSource, MouseInteractions } from '@rrweb/types'; +import { IncrementalSource, MouseInteractions } from 'howdygo-rrweb-types'; import type { eventWithTime } from '../../../types/src'; const events: eventWithTime[] = [ diff --git a/packages/rrweb/test/events/iframe-shadowdom-hover.ts b/packages/rrweb/test/events/iframe-shadowdom-hover.ts index 0e3671dcbf..3c03a9d01c 100644 --- a/packages/rrweb/test/events/iframe-shadowdom-hover.ts +++ b/packages/rrweb/test/events/iframe-shadowdom-hover.ts @@ -1,5 +1,5 @@ -import { EventType, IncrementalSource } from '@rrweb/types'; -import type { eventWithTime } from '@rrweb/types'; +import { EventType, IncrementalSource } from 'howdygo-rrweb-types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; const now = Date.now(); diff --git a/packages/rrweb/test/events/iframe.ts b/packages/rrweb/test/events/iframe.ts index 7288b7ada7..ff257be357 100644 --- a/packages/rrweb/test/events/iframe.ts +++ b/packages/rrweb/test/events/iframe.ts @@ -1,5 +1,5 @@ -import { EventType, IncrementalSource } from '@rrweb/types'; -import type { eventWithTime } from '@rrweb/types'; +import { EventType, IncrementalSource } from 'howdygo-rrweb-types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; const now = Date.now(); diff --git a/packages/rrweb/test/events/input.ts b/packages/rrweb/test/events/input.ts index a1dedc41a7..4e37be902f 100644 --- a/packages/rrweb/test/events/input.ts +++ b/packages/rrweb/test/events/input.ts @@ -1,5 +1,5 @@ -import { EventType, IncrementalSource } from '@rrweb/types'; -import type { eventWithTime } from '@rrweb/types'; +import { EventType, IncrementalSource } from 'howdygo-rrweb-types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; const now = Date.now(); const events: eventWithTime[] = [ diff --git a/packages/rrweb/test/events/ordering.ts b/packages/rrweb/test/events/ordering.ts index 53dbfc2b15..0785f26d0d 100644 --- a/packages/rrweb/test/events/ordering.ts +++ b/packages/rrweb/test/events/ordering.ts @@ -1,5 +1,5 @@ -import { EventType, IncrementalSource } from '@rrweb/types'; -import type { eventWithTime } from '@rrweb/types'; +import { EventType, IncrementalSource } from 'howdygo-rrweb-types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; const now = Date.now(); const events: eventWithTime[] = [ diff --git a/packages/rrweb/test/events/scroll-with-parent-styles.ts b/packages/rrweb/test/events/scroll-with-parent-styles.ts index da9f1c01ef..8bc39a993f 100644 --- a/packages/rrweb/test/events/scroll-with-parent-styles.ts +++ b/packages/rrweb/test/events/scroll-with-parent-styles.ts @@ -1,5 +1,5 @@ -import { EventType, IncrementalSource } from '@rrweb/types'; -import type { eventWithTime } from '@rrweb/types'; +import { EventType, IncrementalSource } from 'howdygo-rrweb-types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; const now = Date.now(); const events: eventWithTime[] = [ diff --git a/packages/rrweb/test/events/scroll.ts b/packages/rrweb/test/events/scroll.ts index baf6d1e0a8..bcbf197889 100644 --- a/packages/rrweb/test/events/scroll.ts +++ b/packages/rrweb/test/events/scroll.ts @@ -1,5 +1,5 @@ -import { EventType, IncrementalSource } from '@rrweb/types'; -import type { eventWithTime } from '@rrweb/types'; +import { EventType, IncrementalSource } from 'howdygo-rrweb-types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; const now = Date.now(); const events: eventWithTime[] = [ diff --git a/packages/rrweb/test/events/selection.ts b/packages/rrweb/test/events/selection.ts index 2d16655592..3c2eb3e84f 100644 --- a/packages/rrweb/test/events/selection.ts +++ b/packages/rrweb/test/events/selection.ts @@ -1,5 +1,5 @@ -import { EventType, IncrementalSource } from '@rrweb/types'; -import type { eventWithTime } from '@rrweb/types'; +import { EventType, IncrementalSource } from 'howdygo-rrweb-types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; const now = Date.now(); diff --git a/packages/rrweb/test/events/shadow-dom.ts b/packages/rrweb/test/events/shadow-dom.ts index 106e848f53..caa8288012 100644 --- a/packages/rrweb/test/events/shadow-dom.ts +++ b/packages/rrweb/test/events/shadow-dom.ts @@ -1,5 +1,5 @@ -import { EventType, IncrementalSource } from '@rrweb/types'; -import type { eventWithTime } from '@rrweb/types'; +import { EventType, IncrementalSource } from 'howdygo-rrweb-types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; const now = Date.now(); diff --git a/packages/rrweb/test/events/style-sheet-rule-events.ts b/packages/rrweb/test/events/style-sheet-rule-events.ts index 577c0caf41..77d4a99946 100644 --- a/packages/rrweb/test/events/style-sheet-rule-events.ts +++ b/packages/rrweb/test/events/style-sheet-rule-events.ts @@ -1,5 +1,5 @@ -import { EventType, IncrementalSource } from '@rrweb/types'; -import type { eventWithTime } from '@rrweb/types'; +import { EventType, IncrementalSource } from 'howdygo-rrweb-types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; const now = Date.now(); const events: eventWithTime[] = [ diff --git a/packages/rrweb/test/events/style-sheet-text-mutation.ts b/packages/rrweb/test/events/style-sheet-text-mutation.ts index d6dcc6de1e..3706a60bb3 100644 --- a/packages/rrweb/test/events/style-sheet-text-mutation.ts +++ b/packages/rrweb/test/events/style-sheet-text-mutation.ts @@ -1,5 +1,5 @@ -import { EventType, IncrementalSource } from '@rrweb/types'; -import type { eventWithTime } from '@rrweb/types'; +import { EventType, IncrementalSource } from 'howdygo-rrweb-types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; const now = Date.now(); const events: eventWithTime[] = [ diff --git a/packages/rrweb/test/events/video-playback-on-full-snapshot.ts b/packages/rrweb/test/events/video-playback-on-full-snapshot.ts index b1e8b12f5f..aad17b4cf2 100644 --- a/packages/rrweb/test/events/video-playback-on-full-snapshot.ts +++ b/packages/rrweb/test/events/video-playback-on-full-snapshot.ts @@ -1,4 +1,4 @@ -import type { eventWithTime } from '@rrweb/types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; const events: eventWithTime[] = [ { type: 0, data: {}, timestamp: 1900000001 }, diff --git a/packages/rrweb/test/events/video-playback.ts b/packages/rrweb/test/events/video-playback.ts index b29841b66e..16cc62d5f1 100644 --- a/packages/rrweb/test/events/video-playback.ts +++ b/packages/rrweb/test/events/video-playback.ts @@ -1,4 +1,4 @@ -import type { eventWithTime } from '@rrweb/types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; const events: eventWithTime[] = [ { type: 0, data: {}, timestamp: 1900000001 }, diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts index f359ded464..7cca48b191 100644 --- a/packages/rrweb/test/integration.test.ts +++ b/packages/rrweb/test/integration.test.ts @@ -20,7 +20,7 @@ import { RecordPlugin, IncrementalSource, CanvasContext, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; import { visitSnapshot, NodeType } from 'rrweb-snapshot'; describe('record integration tests', function (this: ISuite) { diff --git a/packages/rrweb/test/machine.test.ts b/packages/rrweb/test/machine.test.ts index bf96a317b5..fd912bb2a6 100644 --- a/packages/rrweb/test/machine.test.ts +++ b/packages/rrweb/test/machine.test.ts @@ -1,6 +1,6 @@ import { discardPriorSnapshots } from '../src/replay/machine'; import { sampleEvents } from './utils'; -import { EventType } from '@rrweb/types'; +import { EventType } from 'howdygo-rrweb-types'; const events = sampleEvents.filter( (e) => ![EventType.DomContentLoaded, EventType.Load].includes(e.type), diff --git a/packages/rrweb/test/packer.test.ts b/packages/rrweb/test/packer.test.ts index e6487d7a20..87b4a35549 100644 --- a/packages/rrweb/test/packer.test.ts +++ b/packages/rrweb/test/packer.test.ts @@ -1,5 +1,5 @@ import { pack, unpack } from '../src/packer'; -import { eventWithTime, EventType } from '@rrweb/types'; +import { eventWithTime, EventType } from 'howdygo-rrweb-types'; import { MARK } from '../src/packer/base'; const event: eventWithTime = { diff --git a/packages/rrweb/test/record.test.ts b/packages/rrweb/test/record.test.ts index 51e7ad2342..173d958c5b 100644 --- a/packages/rrweb/test/record.test.ts +++ b/packages/rrweb/test/record.test.ts @@ -10,7 +10,7 @@ import { IncrementalSource, styleSheetRuleData, selectionData, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; import { assertSnapshot, getServerURL, diff --git a/packages/rrweb/test/record/cross-origin-iframes.test.ts b/packages/rrweb/test/record/cross-origin-iframes.test.ts index 1b0d00f2d0..d54a7afe67 100644 --- a/packages/rrweb/test/record/cross-origin-iframes.test.ts +++ b/packages/rrweb/test/record/cross-origin-iframes.test.ts @@ -6,8 +6,8 @@ import type { listenerHandler, eventWithTime, mutationData, -} from '@rrweb/types'; -import { EventType, IncrementalSource } from '@rrweb/types'; +} from 'howdygo-rrweb-types'; +import { EventType, IncrementalSource } from 'howdygo-rrweb-types'; import { assertSnapshot, getServerURL, diff --git a/packages/rrweb/test/record/error-handler.test.ts b/packages/rrweb/test/record/error-handler.test.ts index 25b94e9f4c..4eb2fe6536 100644 --- a/packages/rrweb/test/record/error-handler.test.ts +++ b/packages/rrweb/test/record/error-handler.test.ts @@ -2,7 +2,7 @@ import * as fs from 'fs'; import * as path from 'path'; import type * as puppeteer from 'puppeteer'; import type { recordOptions } from '../../src/types'; -import { listenerHandler, eventWithTime, EventType } from '@rrweb/types'; +import { listenerHandler, eventWithTime, EventType } from 'howdygo-rrweb-types'; import { launchPuppeteer } from '../utils'; import { callbackWrapper, diff --git a/packages/rrweb/test/record/webgl.test.ts b/packages/rrweb/test/record/webgl.test.ts index 6dedc94cf7..dab1f6746b 100644 --- a/packages/rrweb/test/record/webgl.test.ts +++ b/packages/rrweb/test/record/webgl.test.ts @@ -8,7 +8,7 @@ import { EventType, IncrementalSource, CanvasContext, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; import { assertSnapshot, launchPuppeteer, diff --git a/packages/rrweb/test/replay/preload-all-images.test.ts b/packages/rrweb/test/replay/preload-all-images.test.ts index 36133d3a6d..ec2a9a092d 100644 --- a/packages/rrweb/test/replay/preload-all-images.test.ts +++ b/packages/rrweb/test/replay/preload-all-images.test.ts @@ -11,7 +11,7 @@ import { IncrementalSource, EventType, eventWithTime, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; let replayer: Replayer; diff --git a/packages/rrweb/test/replay/webgl-mutation.test.ts b/packages/rrweb/test/replay/webgl-mutation.test.ts index 378b0636e6..27f381d4ae 100644 --- a/packages/rrweb/test/replay/webgl-mutation.test.ts +++ b/packages/rrweb/test/replay/webgl-mutation.test.ts @@ -6,7 +6,7 @@ import { polyfillWebGLGlobals } from '../utils'; polyfillWebGLGlobals(); import webglMutation from '../../src/replay/canvas/webgl'; -import { CanvasContext } from '@rrweb/types'; +import { CanvasContext } from 'howdygo-rrweb-types'; import { variableListFor } from '../../src/replay/canvas/deserialize-args'; let canvas: HTMLCanvasElement; diff --git a/packages/rrweb/test/replayer.test.ts b/packages/rrweb/test/replayer.test.ts index b54d360a6b..eb39aac02e 100644 --- a/packages/rrweb/test/replayer.test.ts +++ b/packages/rrweb/test/replayer.test.ts @@ -25,7 +25,7 @@ import adoptedStyleSheetModification from './events/adopted-style-sheet-modifica import documentReplacementEvents from './events/document-replacement'; import hoverInIframeShadowDom from './events/iframe-shadowdom-hover'; import customElementDefineClass from './events/custom-element-define-class'; -import { ReplayerEvents } from '@rrweb/types'; +import { ReplayerEvents } from 'howdygo-rrweb-types'; interface ISuite { code: string; diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts index d444bb3583..7ea4b6c8b3 100644 --- a/packages/rrweb/test/utils.ts +++ b/packages/rrweb/test/utils.ts @@ -8,7 +8,7 @@ import { Optional, mouseInteractionData, pluginEvent, -} from '@rrweb/types'; +} from 'howdygo-rrweb-types'; import type { recordOptions } from '../src/types'; import * as puppeteer from 'puppeteer'; import { format } from 'prettier'; diff --git a/packages/types/package.json b/packages/types/package.json index 2d61372168..f137145b78 100644 --- a/packages/types/package.json +++ b/packages/types/package.json @@ -1,12 +1,12 @@ { - "name": "@rrweb/types", + "name": "howdygo-rrweb-types", "version": "2.0.0-alpha.13", "publishConfig": { "access": "public" }, "keywords": [ "rrweb", - "@rrweb/types" + "howdygo-rrweb-types" ], "scripts": { "dev": "vite", @@ -15,7 +15,7 @@ "prepublish": "npm run build", "lint": "yarn eslint src/**/*.ts" }, - "homepage": "https://github.com/rrweb-io/rrweb/tree/main/packages/@rrweb/types#readme", + "homepage": "https://github.com/rrweb-io/rrweb/tree/main/packages/howdygo-rrweb-types#readme", "bugs": { "url": "https://github.com/rrweb-io/rrweb/issues" }, @@ -25,14 +25,14 @@ }, "license": "MIT", "type": "module", - "main": "./dist/types.umd.cjs", - "module": "./dist/types.js", + "main": "./dist/howdygo-rrweb-types.umd.cjs", + "module": "./dist/howdygo-rrweb-types.js", "typings": "dist/index.d.ts", "exports": { ".": { - "types": "./dist/index.d.ts", - "import": "./dist/types.js", - "require": "./dist/types.umd.cjs" + "types": "./dist/howdygo-rrweb-types.d.ts", + "import": "./dist/howdygo-rrweb-types.js", + "require": "./dist/howdygo-rrweb-types.umd.cjs" } }, "files": [ diff --git a/packages/web-extension/package.json b/packages/web-extension/package.json index d06f8a8bb0..9523526205 100644 --- a/packages/web-extension/package.json +++ b/packages/web-extension/package.json @@ -16,7 +16,7 @@ "prepublish": "npm run pack:chrome && npm run pack:firefox" }, "devDependencies": { - "@rrweb/types": "^2.0.0-alpha.13", + "howdygo-rrweb-types": "^2.0.0-alpha.13", "@types/react-dom": "^18.0.6", "@types/webextension-polyfill": "^0.9.1", "@vitejs/plugin-react": "^2.1.0", diff --git a/packages/web-extension/src/background/index.ts b/packages/web-extension/src/background/index.ts index 901669907b..4453ac0581 100644 --- a/packages/web-extension/src/background/index.ts +++ b/packages/web-extension/src/background/index.ts @@ -1,5 +1,5 @@ import Browser from 'webextension-polyfill'; -import type { eventWithTime } from '@rrweb/types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; import Channel from '~/utils/channel'; import { LocalData, diff --git a/packages/web-extension/src/content/index.ts b/packages/web-extension/src/content/index.ts index fce329e711..5c1dccdc9b 100644 --- a/packages/web-extension/src/content/index.ts +++ b/packages/web-extension/src/content/index.ts @@ -1,6 +1,6 @@ import Browser, { Storage } from 'webextension-polyfill'; import { nanoid } from 'nanoid'; -import type { eventWithTime } from '@rrweb/types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; import { LocalData, LocalDataKey, diff --git a/packages/web-extension/src/content/inject.ts b/packages/web-extension/src/content/inject.ts index 1d18474a01..57665152d1 100644 --- a/packages/web-extension/src/content/inject.ts +++ b/packages/web-extension/src/content/inject.ts @@ -1,6 +1,6 @@ import { record } from 'rrweb'; import type { recordOptions } from 'rrweb/typings/types'; -import type { eventWithTime } from '@rrweb/types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; import { MessageName, RecordStartedMessage } from '~/types'; import { isInCrossOriginIFrame } from '~/utils'; diff --git a/packages/web-extension/src/types.ts b/packages/web-extension/src/types.ts index f0dae57e43..f22aeeb794 100644 --- a/packages/web-extension/src/types.ts +++ b/packages/web-extension/src/types.ts @@ -1,4 +1,4 @@ -import type { eventWithTime } from '@rrweb/types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; export enum SyncDataKey { settings = 'settings', diff --git a/packages/web-extension/src/utils/recording.ts b/packages/web-extension/src/utils/recording.ts index 69fc8362ea..d621b316f5 100644 --- a/packages/web-extension/src/utils/recording.ts +++ b/packages/web-extension/src/utils/recording.ts @@ -1,5 +1,5 @@ import Browser from 'webextension-polyfill'; -import type { eventWithTime } from '@rrweb/types'; +import type { eventWithTime } from 'howdygo-rrweb-types'; import { LocalData, diff --git a/packages/web-extension/src/utils/storage.ts b/packages/web-extension/src/utils/storage.ts index 9c52c38a05..c6fc8adb56 100644 --- a/packages/web-extension/src/utils/storage.ts +++ b/packages/web-extension/src/utils/storage.ts @@ -1,5 +1,5 @@ import { openDB } from 'idb'; -import { eventWithTime } from '@rrweb/types'; +import { eventWithTime } from 'howdygo-rrweb-types'; import { Session } from '~/types'; /** diff --git a/yarn.lock b/yarn.lock index 7a2e073638..40f8fd25f3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5564,15 +5564,10 @@ csso@^4.0.2: dependencies: css-tree "^1.1.2" -cssom@^0.4.4, "cssom@https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz": +cssom@^0.4.4, cssom@^0.5.0, "cssom@https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz": version "0.6.0" resolved "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz#ed298055b97cbddcdeb278f904857629dec5e0e1" -cssom@^0.5.0: - version "0.5.0" - resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36" - integrity sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw== - cssom@~0.3.6: version "0.3.8" resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a" From 61c7b17f6ea5095c14f0e20b2ecca436824766f3 Mon Sep 17 00:00:00 2001 From: Daniel Engelke Date: Fri, 26 Apr 2024 16:11:51 +1000 Subject: [PATCH 10/34] Update rrdom-nodejs --- .changeset/config.json | 2 +- .changeset/nervous-poets-grin.md | 2 +- .changeset/pre.json | 2 +- .changeset/serious-ants-juggle.md | 2 +- packages/rrdom-nodejs/CHANGELOG.md | 2 +- packages/rrdom-nodejs/package.json | 8 ++++---- 6 files changed, 9 insertions(+), 9 deletions(-) diff --git a/.changeset/config.json b/.changeset/config.json index e5821b6a8b..03f0c205bf 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -7,7 +7,7 @@ "rrweb", "rrweb-snapshot", "rrdom", - "rrdom-nodejs", + "howdygo-rrdom-nodejs", "rrweb-player", "howdygo-rrweb-types", "@rrweb/web-extension", diff --git a/.changeset/nervous-poets-grin.md b/.changeset/nervous-poets-grin.md index 084e1c5524..d6e1f2dcb7 100644 --- a/.changeset/nervous-poets-grin.md +++ b/.changeset/nervous-poets-grin.md @@ -1,6 +1,6 @@ --- 'rrdom': patch -'rrdom-nodejs': patch +'howdygo-rrdom-nodejs': patch 'rrweb': patch 'rrweb-player': patch 'rrweb-snapshot': patch diff --git a/.changeset/pre.json b/.changeset/pre.json index c0804ca5c1..1bf2302d3e 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -3,7 +3,7 @@ "tag": "alpha", "initialVersions": { "rrdom": "0.1.7", - "rrdom-nodejs": "0.1.7", + "howdygo-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", diff --git a/.changeset/serious-ants-juggle.md b/.changeset/serious-ants-juggle.md index e475e12267..7392d5dd48 100644 --- a/.changeset/serious-ants-juggle.md +++ b/.changeset/serious-ants-juggle.md @@ -1,6 +1,6 @@ --- 'rrdom': major -'rrdom-nodejs': major +'howdygo-rrdom-nodejs': major 'rrweb': patch --- diff --git a/packages/rrdom-nodejs/CHANGELOG.md b/packages/rrdom-nodejs/CHANGELOG.md index 3e550009cb..5dcbf9d08f 100644 --- a/packages/rrdom-nodejs/CHANGELOG.md +++ b/packages/rrdom-nodejs/CHANGELOG.md @@ -1,4 +1,4 @@ -# rrdom-nodejs +# howdygo-rrdom-nodejs ## 2.0.0-alpha.13 diff --git a/packages/rrdom-nodejs/package.json b/packages/rrdom-nodejs/package.json index 09a69a7ffd..cd3f9c3f34 100644 --- a/packages/rrdom-nodejs/package.json +++ b/packages/rrdom-nodejs/package.json @@ -1,5 +1,5 @@ { - "name": "rrdom-nodejs", + "name": "howdygo-rrdom-nodejs", "version": "2.0.0-alpha.13", "scripts": { "dev": "rollup -c -w", @@ -12,11 +12,11 @@ }, "keywords": [ "rrweb", - "rrdom-nodejs" + "howdygo-rrdom-nodejs" ], "license": "MIT", - "main": "lib/rrdom-nodejs.cjs", - "module": "es/rrdom-nodejs.js", + "main": "lib/howdygo-rrdom-nodejs.cjs", + "module": "es/howdygo-rrdom-nodejs.js", "typings": "es", "files": [ "dist", From f5deb5c95d87af921b45438afbbaed243ae73712 Mon Sep 17 00:00:00 2001 From: Daniel Engelke Date: Fri, 26 Apr 2024 16:25:02 +1000 Subject: [PATCH 11/34] Update rrdom --- packages/rrdom-nodejs/package.json | 10 +++++----- packages/rrdom-nodejs/src/document-nodejs.ts | 2 +- packages/rrdom-nodejs/test/document-nodejs.test.ts | 2 +- packages/rrdom/package.json | 8 ++++---- packages/rrdom/rollup.config.js | 3 +++ packages/rrweb-player/src/Controller.svelte | 2 +- packages/rrweb-player/src/Player.svelte | 2 +- packages/rrweb/package.json | 2 +- .../rrweb/src/plugins/canvas-webrtc/replay/index.ts | 2 +- packages/rrweb/src/replay/index.ts | 4 ++-- packages/rrweb/src/replay/media/index.ts | 2 +- packages/rrweb/src/types.ts | 2 +- packages/rrweb/src/utils.ts | 2 +- .../rrweb/test/benchmark/replay-fast-forward.test.ts | 2 +- yarn.lock | 7 ++++++- 15 files changed, 30 insertions(+), 22 deletions(-) diff --git a/packages/rrdom-nodejs/package.json b/packages/rrdom-nodejs/package.json index cd3f9c3f34..263d713464 100644 --- a/packages/rrdom-nodejs/package.json +++ b/packages/rrdom-nodejs/package.json @@ -1,5 +1,5 @@ { - "name": "howdygo-rrdom-nodejs", + "name": "howdygo-howdygo-rrdom-nodejs", "version": "2.0.0-alpha.13", "scripts": { "dev": "rollup -c -w", @@ -12,11 +12,11 @@ }, "keywords": [ "rrweb", - "howdygo-rrdom-nodejs" + "howdygo-howdygo-rrdom-nodejs" ], "license": "MIT", - "main": "lib/howdygo-rrdom-nodejs.cjs", - "module": "es/howdygo-rrdom-nodejs.js", + "main": "lib/howdygo-howdygo-rrdom-nodejs.cjs", + "module": "es/howdygo-howdygo-rrdom-nodejs.js", "typings": "es", "files": [ "dist", @@ -48,7 +48,7 @@ "cssom": "^0.5.0", "cssstyle": "^2.3.0", "nwsapi": "^2.2.0", - "rrdom": "^2.0.0-alpha.13", + "howdygo-rrdom": "^2.0.0-alpha.13", "rrweb-snapshot": "^2.0.0-alpha.13" }, "browserslist": [ diff --git a/packages/rrdom-nodejs/src/document-nodejs.ts b/packages/rrdom-nodejs/src/document-nodejs.ts index 1d13970d34..6c9d61dff1 100644 --- a/packages/rrdom-nodejs/src/document-nodejs.ts +++ b/packages/rrdom-nodejs/src/document-nodejs.ts @@ -14,7 +14,7 @@ import { ClassList, IRRDocument, CSSStyleDeclaration, -} from 'rrdom'; +} from 'howdygo-rrdom'; // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-var-requires const nwsapi = require('nwsapi'); // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-var-requires diff --git a/packages/rrdom-nodejs/test/document-nodejs.test.ts b/packages/rrdom-nodejs/test/document-nodejs.test.ts index ba3c6144d8..24f6c47663 100644 --- a/packages/rrdom-nodejs/test/document-nodejs.test.ts +++ b/packages/rrdom-nodejs/test/document-nodejs.test.ts @@ -16,7 +16,7 @@ import { RRStyleElement, RRText, } from '../src/document-nodejs'; -import { buildFromDom } from 'rrdom'; +import { buildFromDom } from 'howdygo-rrdom'; describe('RRDocument for nodejs environment', () => { describe('RRDocument API', () => { diff --git a/packages/rrdom/package.json b/packages/rrdom/package.json index 294418c930..7c7a5c2ebc 100644 --- a/packages/rrdom/package.json +++ b/packages/rrdom/package.json @@ -1,12 +1,12 @@ { - "name": "rrdom", + "name": "howdygo-rrdom", "version": "2.0.0-alpha.13", "homepage": "https://github.com/rrweb-io/rrweb/tree/main/packages/rrdom#readme", "license": "MIT", - "main": "lib/rrdom.cjs", - "module": "es/rrdom.js", + "main": "lib/howdygo-rrdom.cjs", + "module": "es/howdygo-rrdom.js", "typings": "es", - "unpkg": "dist/rrdom.js", + "unpkg": "dist/howdygo-rrdom.js", "files": [ "dist", "lib", diff --git a/packages/rrdom/rollup.config.js b/packages/rrdom/rollup.config.js index 5bd346673f..6f3e951221 100644 --- a/packages/rrdom/rollup.config.js +++ b/packages/rrdom/rollup.config.js @@ -55,6 +55,7 @@ for (let config of baseConfigs) { name: config.name, format: 'iife', file: pkg.unpkg.replace(pkg.name, config.path), + extend: true, }, ], }, @@ -67,6 +68,7 @@ for (let config of baseConfigs) { format: 'iife', file: toMinPath(pkg.unpkg).replace(pkg.name, config.path), sourcemap: true, + extend: true, }, ], }, @@ -78,6 +80,7 @@ for (let config of baseConfigs) { { format: 'cjs', file: pkg.main.replace(pkg.name, config.path), + extend: true, }, ], }, diff --git a/packages/rrweb-player/src/Controller.svelte b/packages/rrweb-player/src/Controller.svelte index 7e49df841e..c00f38c4cb 100644 --- a/packages/rrweb-player/src/Controller.svelte +++ b/packages/rrweb-player/src/Controller.svelte @@ -1,7 +1,7 @@