@highlight-run/rrweb 1.2.1 → 2.0.4

package/typings/utils.d.ts

@@ -0,0 +1,43 @@
+import type { throttleOptions, listenerHandler, hookResetter, blockClass, addedNodeMutation, DocumentDimension, IWindow, DeprecatedMirror, textMutation } from './types';
+import type { IMirror, Mirror } from '@highlight-run/rrweb-snapshot';
+import type { RRNode, RRIFrameElement } from '@highlight-run/rrdom/es/virtual-dom';
+export declare function on(type: string, fn: EventListenerOrEventListenerObject, target?: Document | IWindow): listenerHandler;
+export declare let _mirror: DeprecatedMirror;
+export declare function throttle<T>(func: (arg: T) => void, wait: number, options?: throttleOptions): (arg: T) => void;
+export declare function hookSetter<T>(target: T, key: string | number | symbol, d: PropertyDescriptor, isRevoked?: boolean, win?: Window & typeof globalThis): hookResetter;
+export declare function patch(source: {
+    [key: string]: any;
+}, name: string, replacement: (...args: any[]) => any): () => void;
+export declare function getWindowHeight(): number;
+export declare function getWindowWidth(): number;
+export declare const isCanvasNode: (node: Node | null) => boolean;
+export declare function isBlocked(node: Node | null, blockClass: blockClass): boolean;
+export declare function isSerialized(n: Node, mirror: Mirror): boolean;
+export declare function isIgnored(n: Node, mirror: Mirror): boolean;
+export declare function isAncestorRemoved(target: Node, mirror: Mirror): boolean;
+export declare function isTouchEvent(event: MouseEvent | TouchEvent): event is TouchEvent;
+export declare function polyfill(win?: Window & typeof globalThis): void;
+declare type ResolveTree = {
+    value: addedNodeMutation;
+    children: ResolveTree[];
+    parent: ResolveTree | null;
+};
+export declare function queueToResolveTrees(queue: addedNodeMutation[]): ResolveTree[];
+export declare function iterateResolveTree(tree: ResolveTree, cb: (mutation: addedNodeMutation) => unknown): void;
+export declare type AppendedIframe = {
+    mutationInQueue: addedNodeMutation;
+    builtNode: HTMLIFrameElement | RRIFrameElement;
+};
+export declare function isSerializedIframe<TNode extends Node | RRNode>(n: TNode, mirror: IMirror<TNode>): boolean;
+export declare function isSerializedStylesheet<TNode extends Node | RRNode>(n: TNode, mirror: IMirror<TNode>): boolean;
+export declare function getBaseDimension(node: Node, rootIframe: Node): DocumentDimension;
+export declare function hasShadowRoot<T extends Node | RRNode>(n: T): n is T & {
+    shadowRoot: ShadowRoot;
+};
+export declare function getNestedRule(rules: CSSRuleList, position: number[]): CSSGroupingRule;
+export declare function getPositionsAndIndex(nestedIndex: number[]): {
+    positions: number[];
+    index: number | undefined;
+};
+export declare function uniqueTextMutations(mutations: textMutation[]): textMutation[];
+export {};

package/CHANGELOG.md

@@ -1,26 +0,0 @@
-# Changelog
-
-## v1.0.0
-
-### Featrues & Improvements
-
-- Support record same-origin non-sandboxed iframe.
-- Support record open-mode shadow DOM.
-- Implement the plugin API.
-- Export `record.takeFullSnapshot` as a public API
-- Record and replay drag events.
-- Add options to mask texts (#540).
-
-### Fixes
-
-- Get the original MutationObserver when Angular patched it.
-- Fix RangeError: Maximum call stack size exceeded (#479).
-- Fix the linked-list implementation in the recorder.
-- Don't perform newly added actions if the player is paused (#539).
-- Fix inaccurate mouse position (#522)
-
-### Breaking Changes
-
-- Deprecated the usage of `rrweb.mirror`. Please use `record.mirror` and `replayer.getMirror()` instead.
-- Deprecated the record option `recordLog `. See the new plugin API [here](./docs/recipes/console.md).
-- Deprecated the replay option ` `. See the new plugin API [here](./docs/recipes/console.md).

package/README.md

@@ -1,124 +0,0 @@
-<p align="center">
-  <img width="100px" height="100px" src="https://www.rrweb.io/favicon.png">
-</p>
-<p align="center">
-  <a href="https://www.rrweb.io/" style="font-weight: bold">Try rrweb</a>
-</p>
-
-# rrweb
-
-**[The new adventure of the rrweb community](http://www.myriptide.com/rrweb-community/)**
-
-[![Join the chat at slack](https://img.shields.io/badge/slack-@rrweb-teal.svg?logo=slack)](https://join.slack.com/t/rrweb/shared_invite/zt-siwoc6hx-uWay3s2wyG8t5GpZVb8rWg)
-![total gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js?compression=gzip&label=total%20gzip%20size)
-![recorder gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js?compression=gzip&label=recorder%20gzip%20size)
-[![](https://data.jsdelivr.com/v1/package/npm/rrweb/badge)](https://www.jsdelivr.com/package/npm/rrweb)
-
-[中文文档](./README.zh_CN.md)
-
-> I have joined Github Sponsors and highly appreciate your sponsorship.
-
-rrweb refers to 'record and replay the web', which is a tool for recording and replaying users' interactions on the web.
-
-## Guide
-
-[**📚 Read the rrweb guide here. 📚**](./guide.md)
-
-[**🍳 Recipes 🍳**](./docs/recipes/index.md)
-
-## Project Structure
-
-rrweb is mainly composed of 3 parts:
-
-- **[rrweb-snapshot](https://github.com/rrweb-io/rrweb-snapshot)**, including both snapshot and rebuilding features. The snapshot is used to convert the DOM and its state into a serializable data structure with a unique identifier; the rebuilding feature is to rebuild the snapshot into corresponding DOM.
-- **[rrweb](https://github.com/rrweb-io/rrweb)**, including two functions, record and replay. The record function is used to record all the mutations in the DOM; the replay is to replay the recorded mutations one by one according to the corresponding timestamp.
-- **[rrweb-player](https://github.com/rrweb-io/rrweb-player)**, is a player UI for rrweb, providing GUI-based functions like pause, fast-forward, drag and drop to play at any time.
-
-## Roadmap
-
-- rrdom: an ad-hoc DOM for rrweb session data [#419](https://github.com/rrweb-io/rrweb/issues/419)
-- storage engine: do deduplication on a large number of rrweb sessions
-- more end-to-end tests
-- compact mutation data in common patterns
-- provide plugins via the new plugin API, including:
-  - XHR plugin
-  - fetch plugin
-  - GraphQL plugin
-  - ...
-
-## Internal Design
-
-- [serialization](./docs/serialization.md)
-- [incremental snapshot](./docs/observer.md)
-- [replay](./docs/replay.md)
-- [sandbox](./docs/sandbox.md)
-
-## Contribute Guide
-
-Since we want the record and replay sides to share a strongly typed data structure, rrweb is developed with typescript which provides stronger type support.
-
-[Typescript handbook](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html)
-
-1. Fork the rrweb component repository you want to patch.
-2. Run `npm install` to install required dependencies.
-3. Patch the code and pass all the tests.
-4. Push the code and create a pull request.
-
-In addition to adding integration tests and unit tests, rrweb also provides a REPL testing tool.
-
-[Using the REPL tool](./guide.md#REPL-tool)
-
-## Core Team Members
-
-<table>
-  <tr>
-    <td align="center">
-      <a href="https://github.com/Yuyz0112">
-        <img
-          src="https://avatars.githubusercontent.com/u/13651389?s=100"
-          width="100px;"
-          alt=""
-        />
-        <br /><sub><b>Yuyz0112</b></sub>
-      </a>
-    </td>
-    <td align="center">
-      <a href="https://github.com/Mark-Fenng">
-        <img
-          src="https://avatars.githubusercontent.com/u/27533910?s=100"
-          width="100px;"
-          alt=""
-        />
-        <br /><sub><b>Mark-Fenng</b></sub>
-      </a>
-    </td>
-    <td align="center">
-      <a href="https://github.com/eoghanmurray">
-        <img
-          src="https://avatars.githubusercontent.com/u/156780?s=100"
-          width="100px;"
-          alt=""
-        />
-        <br /><sub><b>eoghanmurray</b></sub>
-      </a>
-    </td>
-    <td align="center">
-      <a href="https://github.com/Juice10">
-        <img
-          src="https://avatars.githubusercontent.com/u/4106?s=100"
-          width="100px;"
-          alt=""
-        />
-        <br /><sub><b>Juice10</b></sub>
-      </a>
-    </td>
-  </tr>
-</table>
-
-## Who's using rrweb
-
-<p align="center">
-  <a href="http://www.smartx.com/" target="_blank">
-    <img width="260px" src="https://www.rrweb.io/logos/smartx.png">
-  </a>
-</p>

package/README.zh_CN.md

@@ -1,122 +0,0 @@
-<p align="center">
-  <img width="100px" height="100px" src="https://www.rrweb.io/favicon.png">
-</p>
-<p align="center">
-  <a href="https://www.rrweb.io/" style="font-weight: bold">Try rrweb</a>
-</p>
-
-# rrweb
-
-**[rrweb 社区新的征程](http://www.myriptide.com/rrweb-community-cn/)**
-
-[![Join the chat at slack](https://img.shields.io/badge/slack-@rrweb-teal.svg?logo=slack)](https://join.slack.com/t/rrweb/shared_invite/zt-siwoc6hx-uWay3s2wyG8t5GpZVb8rWg)
-![total gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js?compression=gzip&label=total%20gzip%20size)
-![recorder gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js?compression=gzip&label=recorder%20gzip%20size)
-[![](https://data.jsdelivr.com/v1/package/npm/rrweb/badge)](https://www.jsdelivr.com/package/npm/rrweb)
-
-> 我已开通 Github Sponsor， 您可以通过赞助的形式帮助 rrweb 的开发。
-
-rrweb 是 'record and replay the web' 的简写，旨在利用现代浏览器所提供的强大 API 录制并回放任意 web 界面中的用户操作。
-
-## 指南
-
-[**📚 rrweb 使用指南 📚**](./guide.zh_CN.md)
-
-[**🍳 场景示例 🍳**](./docs/recipes/index.zh_CN.md)
-
-## 项目结构
-
-rrweb 主要由 3 部分组成：
-
-- **[rrweb-snapshot](https://github.com/rrweb-io/rrweb-snapshot)**，包含 snapshot 和 rebuild 两个功能。snapshot 用于将 DOM 及其状态转化为可序列化的数据结构并添加唯一标识；rebuild 则是将 snapshot 记录的数据结构重建为对应的 DOM。
-- **[rrweb](https://github.com/rrweb-io/rrweb)**，包含 record 和 replay 两个功能。record 用于记录 DOM 中的所有变更（mutation）；replay 则是将记录的变更按照对应的时间一一重放。
-- **[rrweb-player](https://github.com/rrweb-io/rrweb-player)**，为 rrweb 提供一套 UI 控件，提供基于 GUI 的暂停、快进、拖拽至任意时间点播放等功能。
-
-## Roadmap
-
-- rrdom: rrweb 数据专用的 DOM 实现 [#419](https://github.com/rrweb-io/rrweb/issues/419)
-- storage engine: 对大规模 rrweb 数据进行去重
-- 更多的 E2E 测试
-- 在常见场景下对 mutation 数据进行压缩
-- 基于新的插件 API 提供更多插件，包括:
-  - XHR 插件
-  - fetch 插件
-  - GraphQL 插件
-  - ...
-
-## Internal Design
-
-- [序列化](./docs/serialization.zh_CN.md)
-- [增量快照](./docs/observer.zh_CN.md)
-- [回放](./docs/replay.zh_CN.md)
-- [沙盒](./docs/sandbox.zh_CN.md)
-
-## Contribute Guide
-
-为了保证录制和回放时可以对应到一致的数据结构，rrweb 采用 typescript 开发以提供更强的类型支持。
-
-[Typescript 手册](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html)
-
-1. Fork 需要修改的 rrweb 组件仓库
-2. `npm install` 安装所需依赖
-3. 修改代码并通过测试
-4. 提交代码，创建 pull request
-
-除了添加集成测试和单元测试之外，rrweb 还提供了交互式的测试工具。
-
-[使用 REPL 工具](./guide.zh_CN.md#REPL-工具)
-
-## Core Team Members
-
-<table>
-  <tr>
-    <td align="center">
-      <a href="https://github.com/Yuyz0112">
-        <img
-          src="https://avatars.githubusercontent.com/u/13651389?s=100"
-          width="100px;"
-          alt=""
-        />
-        <br /><sub><b>Yuyz0112</b></sub>
-      </a>
-    </td>
-    <td align="center">
-      <a href="https://github.com/Mark-Fenng">
-        <img
-          src="https://avatars.githubusercontent.com/u/27533910?s=100"
-          width="100px;"
-          alt=""
-        />
-        <br /><sub><b>Mark-Fenng</b></sub>
-      </a>
-    </td>
-    <td align="center">
-      <a href="https://github.com/eoghanmurray">
-        <img
-          src="https://avatars.githubusercontent.com/u/156780?s=100"
-          width="100px;"
-          alt=""
-        />
-        <br /><sub><b>eoghanmurray</b></sub>
-      </a>
-    </td>
-    <td align="center">
-      <a href="https://github.com/Juice10">
-        <img
-          src="https://avatars.githubusercontent.com/u/4106?s=100"
-          width="100px;"
-          alt=""
-        />
-        <br /><sub><b>Juice10</b></sub>
-      </a>
-    </td>
-  </tr>
-</table>
-
-## Who's using rrweb
-
-<p align="center">
-  <a href="http://www.smartx.com/" target="_blank">
-    <img width="260px" src="https://www.rrweb.io/logos/smartx.png">
-  </a>
-</p>

package/dist/entries/all.d.ts

@@ -1,4 +0,0 @@
-export * from '../index';
-export * from '../packer';
-export * from '../plugins/console/record';
-export * from '../plugins/console/replay';

package/dist/index.css

@@ -1,82 +0,0 @@
-.replayer-wrapper {
-  position: relative;
-}
-.replayer-mouse {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  transition: left 0.05s linear, top 0.05s linear;
-  background-size: contain;
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iNyA1IDE4IDE4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyOCAyOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgaGVpZ2h0PSIzMDBweCIgd2lkdGg9IjMwMHB4Ij4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iOC4yLDIwLjkgOC4yLDQuOSAxOS44LDE2LjUgMTMsMTYuNSAxMi42LDE2LjYgIi8+DQo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjE3LjMsMjEuNiAxMy43LDIzLjEgOSwxMiAxMi43LDEwLjUgIi8+DQo8cmVjdCB4PSIxMi41IiB5PSIxMy42IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjkyMjEgLTAuMzg3MSAwLjM4NzEgMC45MjIxIC01Ljc2MDUgNi41OTA5KSIgd2lkdGg9IjIiIGhlaWdodD0iOCIvPg0KPHBvbHlnb24gcG9pbnRzPSI5LjIsNy4zIDkuMiwxOC41IDEyLjIsMTUuNiAxMi42LDE1LjUgMTcuNCwxNS41ICIvPg0KPC9zdmc+DQo=');
-  border-color: transparent; /* otherwise we transition from black when .touch-device class is added */
-}
-
-.replayer-mouse::after {
-  background: transparent;
-}
-
-.replayer-mouse.active::after {
-  animation: click 0.2s ease-in-out 1;
-}
-.replayer-mouse.touch-device {
-  background-image: none; /* there's no passive cursor on touch-only screens */
-  width: 70px;
-  height: 70px;
-  border-width: 4px;
-  border-style: solid;
-  border-radius: 100%;
-  margin-left: -37px;
-  margin-top: -37px;
-  border-color: rgba(73, 80, 246, 0);
-  transition: left 0s linear, top 0s linear, border-color 0.2s ease-in-out;
-}
-.replayer-mouse.touch-device.touch-active {
-  border-color: rgba(73, 80, 246, 1);
-  transition: left 0.25s linear, top 0.25s linear, border-color 0.2s ease-in-out;
-}
-.replayer-mouse.touch-device::after {
-  opacity: 0; /* there's no passive cursor on touch-only screens */
-}
-.replayer-mouse.touch-device.active::after {
-  animation: touch-click 0.2s ease-in-out 1;
-}
-.replayer-mouse-tail {
-  position: absolute;
-  pointer-events: none;
-}
-
-@keyframes click {
-  0% {
-    opacity: 0.3;
-    width: 20px;
-    height: 20px;
-    background: transparent;
-  }
-  75% {
-    width: 24px;
-    height: 24px;
-    opacity: 0.8;
-    background: #dc2626;
-  }
-  100% {
-    background: transparent;
-  }
-}
-
-@keyframes touch-click {
-  0% {
-    opacity: 0;
-    width: 20px;
-    height: 20px;
-  }
-  50% {
-    opacity: 0.5;
-    width: 10px;
-    height: 10px;
-  }
-}
-
-
-/*# sourceMappingURL=index.css.map*/

package/dist/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["webpack://highlightLib/./src/replay/styles/style.css"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,+CAA+C;EAC/C,wBAAwB;EACxB,kCAAkC;EAClC,4BAA4B;EAC5B,uzBAAuzB;EACvzB,yBAAyB,EAAE,yEAAyE;AACtG;;AAEA;EACE,uBAAuB;AACzB;;AAEA;EACE,mCAAmC;AACrC;AACA;EACE,sBAAsB,EAAE,oDAAoD;EAC5E,WAAW;EACX,YAAY;EACZ,iBAAiB;EACjB,mBAAmB;EACnB,mBAAmB;EACnB,kBAAkB;EAClB,iBAAiB;EACjB,kCAAkC;EAClC,wEAAwE;AAC1E;AACA;EACE,kCAAkC;EAClC,8EAA8E;AAChF;AACA;EACE,UAAU,EAAE,oDAAoD;AAClE;AACA;EACE,yCAAyC;AAC3C;AACA;EACE,kBAAkB;EAClB,oBAAoB;AACtB;;AAEA;EACE;IACE,YAAY;IACZ,WAAW;IACX,YAAY;IACZ,uBAAuB;EACzB;EACA;IACE,WAAW;IACX,YAAY;IACZ,YAAY;IACZ,mBAAmB;EACrB;EACA;IACE,uBAAuB;EACzB;AACF;;AAEA;EACE;IACE,UAAU;IACV,WAAW;IACX,YAAY;EACd;EACA;IACE,YAAY;IACZ,WAAW;IACX,YAAY;EACd;AACF","file":"index.css","sourcesContent":[".replayer-wrapper {\n  position: relative;\n}\n.replayer-mouse {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  transition: left 0.05s linear, top 0.05s linear;\n  background-size: contain;\n  background-position: center center;\n  background-repeat: no-repeat;\n  background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iNyA1IDE4IDE4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyOCAyOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgaGVpZ2h0PSIzMDBweCIgd2lkdGg9IjMwMHB4Ij4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iOC4yLDIwLjkgOC4yLDQuOSAxOS44LDE2LjUgMTMsMTYuNSAxMi42LDE2LjYgIi8+DQo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjE3LjMsMjEuNiAxMy43LDIzLjEgOSwxMiAxMi43LDEwLjUgIi8+DQo8cmVjdCB4PSIxMi41IiB5PSIxMy42IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjkyMjEgLTAuMzg3MSAwLjM4NzEgMC45MjIxIC01Ljc2MDUgNi41OTA5KSIgd2lkdGg9IjIiIGhlaWdodD0iOCIvPg0KPHBvbHlnb24gcG9pbnRzPSI5LjIsNy4zIDkuMiwxOC41IDEyLjIsMTUuNiAxMi42LDE1LjUgMTcuNCwxNS41ICIvPg0KPC9zdmc+DQo=');\n  border-color: transparent; /* otherwise we transition from black when .touch-device class is added */\n}\n\n.replayer-mouse::after {\n  background: transparent;\n}\n\n.replayer-mouse.active::after {\n  animation: click 0.2s ease-in-out 1;\n}\n.replayer-mouse.touch-device {\n  background-image: none; /* there's no passive cursor on touch-only screens */\n  width: 70px;\n  height: 70px;\n  border-width: 4px;\n  border-style: solid;\n  border-radius: 100%;\n  margin-left: -37px;\n  margin-top: -37px;\n  border-color: rgba(73, 80, 246, 0);\n  transition: left 0s linear, top 0s linear, border-color 0.2s ease-in-out;\n}\n.replayer-mouse.touch-device.touch-active {\n  border-color: rgba(73, 80, 246, 1);\n  transition: left 0.25s linear, top 0.25s linear, border-color 0.2s ease-in-out;\n}\n.replayer-mouse.touch-device::after {\n  opacity: 0; /* there's no passive cursor on touch-only screens */\n}\n.replayer-mouse.touch-device.active::after {\n  animation: touch-click 0.2s ease-in-out 1;\n}\n.replayer-mouse-tail {\n  position: absolute;\n  pointer-events: none;\n}\n\n@keyframes click {\n  0% {\n    opacity: 0.3;\n    width: 20px;\n    height: 20px;\n    background: transparent;\n  }\n  75% {\n    width: 24px;\n    height: 24px;\n    opacity: 0.8;\n    background: #dc2626;\n  }\n  100% {\n    background: transparent;\n  }\n}\n\n@keyframes touch-click {\n  0% {\n    opacity: 0;\n    width: 20px;\n    height: 20px;\n  }\n  50% {\n    opacity: 0.5;\n    width: 10px;\n    height: 10px;\n  }\n}\n"],"sourceRoot":""}