@highlight-run/rrweb 2.0.1 → 2.0.4

package/es/rrweb/packages/rrweb/src/record/observers/canvas/serialize-args.js

@@ -1,116 +1,123 @@
-import { __spreadArray, __read } from '../../../../ext/tslib/tslib.es6.js';
-import { encode } from '../../../../../../ext/base64-arraybuffer/dist/base64-arraybuffer.es5.js';
+import { encode } from './../../../../../../ext/base64-arraybuffer/dist/base64-arraybuffer.es5.js';
 
-var webGLVarMap = new Map();
-function variableListFor(ctx, ctor) {
-    var contextMap = webGLVarMap.get(ctx);
-    if (!contextMap) {
-        contextMap = new Map();
-        webGLVarMap.set(ctx, contextMap);
-    }
-    if (!contextMap.has(ctor)) {
-        contextMap.set(ctor, []);
-    }
-    return contextMap.get(ctor);
-}
-var saveWebGLVar = function (value, win, ctx) {
-    if (!value ||
-        !(isInstanceOfWebGLObject(value, win) || typeof value === 'object'))
-        return;
-    var name = value.constructor.name;
-    var list = variableListFor(ctx, name);
-    var index = list.indexOf(value);
-    if (index === -1) {
-        index = list.length;
-        list.push(value);
-    }
-    return index;
-};
-function serializeArg(value, win, ctx) {
-    if (value instanceof Array) {
-        return value.map(function (arg) { return serializeArg(arg, win, ctx); });
-    }
-    else if (value === null) {
-        return value;
-    }
-    else if (value instanceof Float32Array ||
-        value instanceof Float64Array ||
-        value instanceof Int32Array ||
-        value instanceof Uint32Array ||
-        value instanceof Uint8Array ||
-        value instanceof Uint16Array ||
-        value instanceof Int16Array ||
-        value instanceof Int8Array ||
-        value instanceof Uint8ClampedArray) {
-        var name_1 = value.constructor.name;
-        return {
-            rr_type: name_1,
-            args: [Object.values(value)],
-        };
-    }
-    else if (value instanceof ArrayBuffer) {
-        var name_2 = value.constructor.name;
-        var base64 = encode(value);
-        return {
-            rr_type: name_2,
-            base64: base64,
-        };
-    }
-    else if (value instanceof DataView) {
-        var name_3 = value.constructor.name;
-        return {
-            rr_type: name_3,
-            args: [
-                serializeArg(value.buffer, win, ctx),
-                value.byteOffset,
-                value.byteLength,
-            ],
-        };
-    }
-    else if (value instanceof HTMLImageElement) {
-        var name_4 = value.constructor.name;
-        var src = value.src;
-        return {
-            rr_type: name_4,
-            src: src,
-        };
-    }
-    else if (value instanceof ImageData) {
-        var name_5 = value.constructor.name;
-        return {
-            rr_type: name_5,
-            args: [serializeArg(value.data, win, ctx), value.width, value.height],
-        };
-    }
-    else if (isInstanceOfWebGLObject(value, win) || typeof value === 'object') {
-        var name_6 = value.constructor.name;
-        var index = saveWebGLVar(value, win, ctx);
-        return {
-            rr_type: name_6,
-            index: index,
-        };
-    }
-    return value;
-}
-var serializeArgs = function (args, win, ctx) {
-    return __spreadArray([], __read(args), false).map(function (arg) { return serializeArg(arg, win, ctx); });
-};
-var isInstanceOfWebGLObject = function (value, win) {
-    var webGLConstructorNames = [
-        'WebGLActiveInfo',
-        'WebGLBuffer',
-        'WebGLFramebuffer',
-        'WebGLProgram',
-        'WebGLRenderbuffer',
-        'WebGLShader',
-        'WebGLShaderPrecisionFormat',
-        'WebGLTexture',
-        'WebGLUniformLocation',
-        'WebGLVertexArrayObject',
-        'WebGLVertexArrayObjectOES',
-    ];
-    var supportedWebGLConstructorNames = webGLConstructorNames.filter(function (name) { return typeof win[name] === 'function'; });
-    return Boolean(supportedWebGLConstructorNames.find(function (name) { return value instanceof win[name]; }));
+const canvasVarMap = new Map();
+function variableListFor(ctx, ctor) {
+    let contextMap = canvasVarMap.get(ctx);
+    if (!contextMap) {
+        contextMap = new Map();
+        canvasVarMap.set(ctx, contextMap);
+    }
+    if (!contextMap.has(ctor)) {
+        contextMap.set(ctor, []);
+    }
+    return contextMap.get(ctor);
+}
+const saveWebGLVar = (value, win, ctx) => {
+    if (!value ||
+        !(isInstanceOfWebGLObject(value, win) || typeof value === 'object'))
+        return;
+    const name = value.constructor.name;
+    const list = variableListFor(ctx, name);
+    let index = list.indexOf(value);
+    if (index === -1) {
+        index = list.length;
+        list.push(value);
+    }
+    return index;
+};
+function serializeArg(value, win, ctx) {
+    if (value instanceof Array) {
+        return value.map((arg) => serializeArg(arg, win, ctx));
+    }
+    else if (value === null) {
+        return value;
+    }
+    else if (value instanceof Float32Array ||
+        value instanceof Float64Array ||
+        value instanceof Int32Array ||
+        value instanceof Uint32Array ||
+        value instanceof Uint8Array ||
+        value instanceof Uint16Array ||
+        value instanceof Int16Array ||
+        value instanceof Int8Array ||
+        value instanceof Uint8ClampedArray) {
+        const name = value.constructor.name;
+        return {
+            rr_type: name,
+            args: [Object.values(value)],
+        };
+    }
+    else if (value instanceof ArrayBuffer) {
+        const name = value.constructor.name;
+        const base64 = encode(value);
+        return {
+            rr_type: name,
+            base64,
+        };
+    }
+    else if (value instanceof DataView) {
+        const name = value.constructor.name;
+        return {
+            rr_type: name,
+            args: [
+                serializeArg(value.buffer, win, ctx),
+                value.byteOffset,
+                value.byteLength,
+            ],
+        };
+    }
+    else if (value instanceof HTMLImageElement) {
+        const name = value.constructor.name;
+        const { src } = value;
+        return {
+            rr_type: name,
+            src,
+        };
+    }
+    else if (value instanceof HTMLCanvasElement) {
+        const name = 'HTMLImageElement';
+        const src = value.toDataURL();
+        return {
+            rr_type: name,
+            src,
+        };
+    }
+    else if (value instanceof ImageData) {
+        const name = value.constructor.name;
+        return {
+            rr_type: name,
+            args: [serializeArg(value.data, win, ctx), value.width, value.height],
+        };
+    }
+    else if (isInstanceOfWebGLObject(value, win) || typeof value === 'object') {
+        const name = value.constructor.name;
+        const index = saveWebGLVar(value, win, ctx);
+        return {
+            rr_type: name,
+            index: index,
+        };
+    }
+    return value;
+}
+const serializeArgs = (args, win, ctx) => {
+    return [...args].map((arg) => serializeArg(arg, win, ctx));
+};
+const isInstanceOfWebGLObject = (value, win) => {
+    const webGLConstructorNames = [
+        'WebGLActiveInfo',
+        'WebGLBuffer',
+        'WebGLFramebuffer',
+        'WebGLProgram',
+        'WebGLRenderbuffer',
+        'WebGLShader',
+        'WebGLShaderPrecisionFormat',
+        'WebGLTexture',
+        'WebGLUniformLocation',
+        'WebGLVertexArrayObject',
+        'WebGLVertexArrayObjectOES',
+    ];
+    const supportedWebGLConstructorNames = webGLConstructorNames.filter((name) => typeof win[name] === 'function');
+    return Boolean(supportedWebGLConstructorNames.find((name) => value instanceof win[name]));
 };
 
 export { isInstanceOfWebGLObject, saveWebGLVar, serializeArg, serializeArgs, variableListFor };

package/es/rrweb/packages/rrweb/src/record/observers/canvas/webgl.js

@@ -1,78 +1,59 @@
-import { __spreadArray, __read, __values } from '../../../../ext/tslib/tslib.es6.js';
 import { CanvasContext } from '../../../types.js';
 import { patch, isBlocked, hookSetter } from '../../../utils.js';
 import { saveWebGLVar, serializeArgs } from './serialize-args.js';
 
-function patchGLPrototype(prototype, type, cb, blockClass, mirror, win) {
-    var e_1, _a;
-    var handlers = [];
-    var props = Object.getOwnPropertyNames(prototype);
-    var _loop_1 = function (prop) {
-        try {
-            if (typeof prototype[prop] !== 'function') {
-                return "continue";
-            }
-            var restoreHandler = patch(prototype, prop, function (original) {
-                return function () {
-                    var args = [];
-                    for (var _i = 0; _i < arguments.length; _i++) {
-                        args[_i] = arguments[_i];
-                    }
-                    var result = original.apply(this, args);
-                    saveWebGLVar(result, win, prototype);
-                    if (!isBlocked(this.canvas, blockClass)) {
-                        var id = mirror.getId(this.canvas);
-                        var recordArgs = serializeArgs(__spreadArray([], __read(args), false), win, prototype);
-                        var mutation = {
-                            type: type,
-                            property: prop,
-                            args: recordArgs,
-                        };
-                        cb(this.canvas, mutation);
-                    }
-                    return result;
-                };
-            });
-            handlers.push(restoreHandler);
-        }
-        catch (_b) {
-            var hookHandler = hookSetter(prototype, prop, {
-                set: function (v) {
-                    cb(this.canvas, {
-                        type: type,
-                        property: prop,
-                        args: [v],
-                        setter: true,
-                    });
-                },
-            });
-            handlers.push(hookHandler);
-        }
-    };
-    try {
-        for (var props_1 = __values(props), props_1_1 = props_1.next(); !props_1_1.done; props_1_1 = props_1.next()) {
-            var prop = props_1_1.value;
-            _loop_1(prop);
-        }
-    }
-    catch (e_1_1) { e_1 = { error: e_1_1 }; }
-    finally {
-        try {
-            if (props_1_1 && !props_1_1.done && (_a = props_1.return)) _a.call(props_1);
-        }
-        finally { if (e_1) throw e_1.error; }
-    }
-    return handlers;
-}
-function initCanvasWebGLMutationObserver(cb, win, blockClass, mirror) {
-    var handlers = [];
-    handlers.push.apply(handlers, __spreadArray([], __read(patchGLPrototype(win.WebGLRenderingContext.prototype, CanvasContext.WebGL, cb, blockClass, mirror, win)), false));
-    if (typeof win.WebGL2RenderingContext !== 'undefined') {
-        handlers.push.apply(handlers, __spreadArray([], __read(patchGLPrototype(win.WebGL2RenderingContext.prototype, CanvasContext.WebGL2, cb, blockClass, mirror, win)), false));
-    }
-    return function () {
-        handlers.forEach(function (h) { return h(); });
-    };
+function patchGLPrototype(prototype, type, cb, blockClass, mirror, win) {
+    const handlers = [];
+    const props = Object.getOwnPropertyNames(prototype);
+    for (const prop of props) {
+        try {
+            if (typeof prototype[prop] !== 'function') {
+                continue;
+            }
+            const restoreHandler = patch(prototype, prop, function (original) {
+                return function (...args) {
+                    const result = original.apply(this, args);
+                    saveWebGLVar(result, win, prototype);
+                    if (!isBlocked(this.canvas, blockClass)) {
+                        const id = mirror.getId(this.canvas);
+                        const recordArgs = serializeArgs([...args], win, prototype);
+                        const mutation = {
+                            type,
+                            property: prop,
+                            args: recordArgs,
+                        };
+                        cb(this.canvas, mutation);
+                    }
+                    return result;
+                };
+            });
+            handlers.push(restoreHandler);
+        }
+        catch (_a) {
+            const hookHandler = hookSetter(prototype, prop, {
+                set(v) {
+                    cb(this.canvas, {
+                        type,
+                        property: prop,
+                        args: [v],
+                        setter: true,
+                    });
+                },
+            });
+            handlers.push(hookHandler);
+        }
+    }
+    return handlers;
+}
+function initCanvasWebGLMutationObserver(cb, win, blockClass, mirror) {
+    const handlers = [];
+    handlers.push(...patchGLPrototype(win.WebGLRenderingContext.prototype, CanvasContext.WebGL, cb, blockClass, mirror, win));
+    if (typeof win.WebGL2RenderingContext !== 'undefined') {
+        handlers.push(...patchGLPrototype(win.WebGL2RenderingContext.prototype, CanvasContext.WebGL2, cb, blockClass, mirror, win));
+    }
+    return () => {
+        handlers.forEach((h) => h());
+    };
 }
 
-export default initCanvasWebGLMutationObserver;
+export { initCanvasWebGLMutationObserver as default };

package/es/rrweb/packages/rrweb/src/record/shadow-dom-manager.js

@@ -1,45 +1,43 @@
-import { __assign } from '../../ext/tslib/tslib.es6.js';
 import { initMutationObserver, initScrollObserver } from './observer.js';
 import { patch } from '../utils.js';
 
-var ShadowDomManager = (function () {
-    function ShadowDomManager(options) {
-        this.restorePatches = [];
-        this.mutationCb = options.mutationCb;
-        this.scrollCb = options.scrollCb;
-        this.bypassOptions = options.bypassOptions;
-        this.mirror = options.mirror;
-        var manager = this;
-        this.restorePatches.push(patch(HTMLElement.prototype, 'attachShadow', function (original) {
-            return function () {
-                var shadowRoot = original.apply(this, arguments);
-                if (this.shadowRoot)
-                    manager.addShadowRoot(this.shadowRoot, this.ownerDocument);
-                return shadowRoot;
-            };
-        }));
-    }
-    ShadowDomManager.prototype.addShadowRoot = function (shadowRoot, doc) {
-        initMutationObserver(__assign(__assign({}, this.bypassOptions), { doc: doc, mutationCb: this.mutationCb, mirror: this.mirror, shadowDomManager: this }), shadowRoot);
-        initScrollObserver(__assign(__assign({}, this.bypassOptions), { scrollCb: this.scrollCb, doc: shadowRoot, mirror: this.mirror }));
-    };
-    ShadowDomManager.prototype.observeAttachShadow = function (iframeElement) {
-        if (iframeElement.contentWindow) {
-            var manager_1 = this;
-            this.restorePatches.push(patch(iframeElement.contentWindow.HTMLElement.prototype, 'attachShadow', function (original) {
-                return function () {
-                    var shadowRoot = original.apply(this, arguments);
-                    if (this.shadowRoot)
-                        manager_1.addShadowRoot(this.shadowRoot, iframeElement.contentDocument);
-                    return shadowRoot;
-                };
-            }));
-        }
-    };
-    ShadowDomManager.prototype.reset = function () {
-        this.restorePatches.forEach(function (restorePatch) { return restorePatch(); });
-    };
-    return ShadowDomManager;
-}());
+class ShadowDomManager {
+    constructor(options) {
+        this.restorePatches = [];
+        this.mutationCb = options.mutationCb;
+        this.scrollCb = options.scrollCb;
+        this.bypassOptions = options.bypassOptions;
+        this.mirror = options.mirror;
+        const manager = this;
+        this.restorePatches.push(patch(HTMLElement.prototype, 'attachShadow', function (original) {
+            return function () {
+                const shadowRoot = original.apply(this, arguments);
+                if (this.shadowRoot)
+                    manager.addShadowRoot(this.shadowRoot, this.ownerDocument);
+                return shadowRoot;
+            };
+        }));
+    }
+    addShadowRoot(shadowRoot, doc) {
+        initMutationObserver(Object.assign(Object.assign({}, this.bypassOptions), { doc, mutationCb: this.mutationCb, mirror: this.mirror, shadowDomManager: this }), shadowRoot);
+        initScrollObserver(Object.assign(Object.assign({}, this.bypassOptions), { scrollCb: this.scrollCb, doc: shadowRoot, mirror: this.mirror }));
+    }
+    observeAttachShadow(iframeElement) {
+        if (iframeElement.contentWindow) {
+            const manager = this;
+            this.restorePatches.push(patch(iframeElement.contentWindow.HTMLElement.prototype, 'attachShadow', function (original) {
+                return function () {
+                    const shadowRoot = original.apply(this, arguments);
+                    if (this.shadowRoot)
+                        manager.addShadowRoot(this.shadowRoot, iframeElement.contentDocument);
+                    return shadowRoot;
+                };
+            }));
+        }
+    }
+    reset() {
+        this.restorePatches.forEach((restorePatch) => restorePatch());
+    }
+}
 
 export { ShadowDomManager };

package/es/rrweb/packages/rrweb/src/record/stylesheet-manager.js

@@ -0,0 +1,31 @@
+class StylesheetManager {
+    constructor(options) {
+        this.trackedStylesheets = new WeakSet();
+        this.mutationCb = options.mutationCb;
+    }
+    addStylesheet(linkEl) {
+        if (this.trackedStylesheets.has(linkEl))
+            return;
+        this.trackedStylesheets.add(linkEl);
+        this.trackStylesheet(linkEl);
+    }
+    trackStylesheet(linkEl) {
+    }
+    attachStylesheet(linkEl, childSn, mirror) {
+        this.mutationCb({
+            adds: [
+                {
+                    parentId: mirror.getId(linkEl),
+                    nextId: null,
+                    node: childSn,
+                },
+            ],
+            removes: [],
+            texts: [],
+            attributes: [],
+        });
+        this.addStylesheet(linkEl);
+    }
+}
+
+export { StylesheetManager };

package/es/rrweb/packages/rrweb/src/replay/canvas/2d.js

@@ -1,25 +1,29 @@
-function canvasMutation(_a) {
-    var event = _a.event, mutation = _a.mutation, target = _a.target, imageMap = _a.imageMap, errorHandler = _a.errorHandler;
-    try {
-        var ctx = target.getContext('2d');
-        if (mutation.setter) {
-            ctx[mutation.property] = mutation.args[0];
-            return;
-        }
-        var original = ctx[mutation.property];
-        if (mutation.property === 'drawImage' &&
-            typeof mutation.args[0] === 'string') {
-            var image = imageMap.get(event);
-            mutation.args[0] = image;
-            original.apply(ctx, mutation.args);
-        }
-        else {
-            original.apply(ctx, mutation.args);
-        }
-    }
-    catch (error) {
-        errorHandler(mutation, error);
-    }
+import { __awaiter } from './../../../../../ext/tslib/tslib.es6.js';
+import { deserializeArg } from './deserialize-args.js';
+
+function canvasMutation({ event, mutation, target, imageMap, errorHandler, }) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const ctx = target.getContext('2d');
+            if (mutation.setter) {
+                ctx[mutation.property] = mutation.args[0];
+                return;
+            }
+            const original = ctx[mutation.property];
+            if (mutation.property === 'drawImage' &&
+                typeof mutation.args[0] === 'string') {
+                const image = imageMap.get(event);
+                original.apply(ctx, mutation.args);
+            }
+            else {
+                const args = yield Promise.all(mutation.args.map(deserializeArg(imageMap, ctx)));
+                original.apply(ctx, args);
+            }
+        }
+        catch (error) {
+            errorHandler(mutation, error);
+        }
+    });
 }
 
-export default canvasMutation;
+export { canvasMutation as default };

package/es/rrweb/packages/rrweb/src/replay/canvas/deserialize-args.js

@@ -0,0 +1,67 @@
+import { __awaiter } from './../../../../../ext/tslib/tslib.es6.js';
+import { decode } from './../../../../../ext/base64-arraybuffer/dist/base64-arraybuffer.es5.js';
+
+const webGLVarMap = new Map();
+function variableListFor(ctx, ctor) {
+    let contextMap = webGLVarMap.get(ctx);
+    if (!contextMap) {
+        contextMap = new Map();
+        webGLVarMap.set(ctx, contextMap);
+    }
+    if (!contextMap.has(ctor)) {
+        contextMap.set(ctor, []);
+    }
+    return contextMap.get(ctor);
+}
+function deserializeArg(imageMap, ctx, preload) {
+    return (arg) => __awaiter(this, void 0, void 0, function* () {
+        if (arg && typeof arg === 'object' && 'rr_type' in arg) {
+            if (preload)
+                preload.isUnchanged = false;
+            if (arg.rr_type === 'ImageBitmap' && 'args' in arg) {
+                const args = yield deserializeArg(imageMap, ctx, preload)(arg.args);
+                return yield createImageBitmap.apply(null, args);
+            }
+            else if ('index' in arg) {
+                if (preload || ctx === null)
+                    return arg;
+                const { rr_type: name, index } = arg;
+                return variableListFor(ctx, name)[index];
+            }
+            else if ('args' in arg) {
+                const { rr_type: name, args } = arg;
+                const ctor = window[name];
+                return new ctor(...(yield Promise.all(args.map(deserializeArg(imageMap, ctx, preload)))));
+            }
+            else if ('base64' in arg) {
+                return decode(arg.base64);
+            }
+            else if ('src' in arg) {
+                const image = imageMap.get(arg.src);
+                if (image) {
+                    return image;
+                }
+                else {
+                    const image = new Image();
+                    image.src = arg.src;
+                    imageMap.set(arg.src, image);
+                    return image;
+                }
+            }
+            else if ('data' in arg && arg.rr_type === 'Blob') {
+                const blobContents = yield Promise.all(arg.data.map(deserializeArg(imageMap, ctx, preload)));
+                const blob = new Blob(blobContents, {
+                    type: arg.type,
+                });
+                return blob;
+            }
+        }
+        else if (Array.isArray(arg)) {
+            const result = yield Promise.all(arg.map(deserializeArg(imageMap, ctx, preload)));
+            return result;
+        }
+        return arg;
+    });
+}
+
+export { deserializeArg, variableListFor };