@betterbugs/rrweb-snapshot 2.0.0-alpha.19

package/README.md

@@ -0,0 +1,214 @@
+# rrweb-snapshot
+
+[![Build Status](https://travis-ci.org/rrweb-io/rrweb.svg?branch=master)](https://travis-ci.org/rrweb-io/rrweb) [![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)
+
+Snapshot the DOM into a stateful and serializable data structure.
+Also, provide the ability to rebuild the DOM via snapshot.
+
+## API
+
+This module export following methods:
+
+### snapshot
+
+`snapshot` will traverse the DOM and return a stateful and serializable data structure which can represent the current DOM **view**.
+
+There are several things will be done during snapshot:
+
+1. Inline some DOM states into HTML attributes, e.g, HTMLInputElement's value.
+2. Turn script tags into `noscript` tags to avoid scripts being executed.
+3. Try to inline stylesheets to make sure local stylesheets can be used.
+4. Make relative paths in href, src, CSS to be absolute paths.
+5. Give an id to each Node, and return the id node map when snapshot finished.
+
+#### rebuild
+
+`rebuild` will build the DOM according to the taken snapshot.
+
+There are several things will be done during rebuild:
+
+1. Add data-rrid attribute if the Node is an Element.
+2. Create some extra DOM node like text node to place inline CSS and some states.
+3. Add data-extra-child-index attribute if Node has some extra child DOM.
+
+#### serializeNodeWithId
+
+`serializeNodeWithId` can serialize a node into snapshot format with id.
+
+#### buildNodeWithSN
+
+`buildNodeWithSN` will build DOM from serialized node and store serialized information in the `mirror.getMeta(node)`.
+
+## Sponsors
+
+[Become a sponsor](https://opencollective.com/rrweb#sponsor) and get your logo on our README on Github with a link to your site.
+
+### Gold Sponsors 🥇
+
+<div dir="auto">
+
+<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/0/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/1/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/2/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/3/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/4/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/5/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/6/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
+
+</div>
+
+### Silver Sponsors 🥈
+
+<div dir="auto">
+
+<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/0/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/1/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/2/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/3/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/4/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/5/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/6/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
+
+</div>
+
+### Bronze Sponsors 🥉
+
+<div dir="auto">
+
+<a href="https://opencollective.com/rrweb/tiers/sponsors/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/0/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/1/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/2/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/3/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/4/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/5/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/6/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/7/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/7/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/8/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/8/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+
+</div>
+
+### Backers
+
+<a href="https://opencollective.com/rrweb#sponsor" rel="nofollow"><img src="https://opencollective.com/rrweb/tiers/backers.svg?avatarHeight=36"></a>
+
+## 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>
+        <br /><br />
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/YunFeng0817">
+        <img
+          src="https://avatars.githubusercontent.com/u/27533910?s=100"
+          width="100px;"
+          alt=""
+        />
+        <br /><sub><b>Yun Feng</b></sub>
+        <br /><br />
+      </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>
+        <br /><br />
+      </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>
+        <br /><sub>open for rrweb consulting</sub>
+      </a>
+    </td>
+  </tr>
+</table>
+
+## Who's using rrweb?
+
+<table>
+  <tr>
+    <td align="center">
+      <a href="http://www.smartx.com/" target="_blank">
+        <img width="195px" src="https://www.rrweb.io/logos/smartx.png">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://posthog.com?utm_source=rrweb&utm_medium=sponsorship&utm_campaign=open-source-sponsorship" target="_blank">
+        <img width="195px" src="https://www.rrweb.io/logos/posthog.png">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://statcounter.com/session-replay/" target="_blank">
+        <img width="195px" src="https://statcounter.com/images/logo-statcounter-arc-blue.svg">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://recordonce.com/" target="_blank">
+        <img width="195px" alt="Smart screen recording for SaaS" src="https://uploads-ssl.webflow.com/5f3d133183156245630d4446/5f3d1940abe8db8612c23521_Record-Once-logo-554x80px.svg">
+      </a>
+    </td>
+  </tr>
+    <tr>
+    <td align="center">
+      <a href="https://cux.io" target="_blank">
+        <img style="padding: 8px" alt="The first ever UX automation tool" width="195px" src="https://cux.io/cux-logo.svg">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://remsupp.com" target="_blank">
+        <img style="padding: 8px" alt="Remote Access & Co-Browsing" width="195px" src="https://remsupp.com/images/logo.png">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://highlight.io" target="_blank">
+        <img style="padding: 8px" alt="The open source, fullstack Monitoring Platform." width="195px" src="https://github.com/highlight/highlight/raw/main/highlight.io/public/images/logo.png">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://analyzee.io" target="_blank">
+        <img style="padding: 8px" alt="Comprehensive data analytics platform that empowers businesses to gain valuable insights and make data-driven decisions." width="195px" src="https://cdn.analyzee.io/assets/analyzee-logo.png">
+      </a>
+    </td>
+  </tr>
+  <tr>
+    <td align="center">
+      <a href="https://requestly.io" target="_blank">
+        <img style="padding: 8px" alt="Intercept, Modify, Record & Replay HTTP Requests." width="195px" src="https://github.com/requestly/requestly/assets/16779465/652552db-c867-44cb-9bb5-94a2026e04ca">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://gleap.io" target="_blank">
+        <img style="padding: 8px" alt="In-app bug reporting & customer feedback platform." width="195px" src="https://assets-global.website-files.com/6506f3f29c68b1724807619d/6506f56010237164c6306591_GleapLogo.svg">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://uxwizz.com" target="_blank">
+        <img style="padding: 8px" alt="Self-hosted website analytics with heatmaps and session recordings." width="195px" src="https://github.com/UXWizz/public-files/raw/main/assets/logo.png">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://www.howdygo.com" target="_blank">
+        <img style="padding: 8px" alt="Interactive product demos for small marketing teams" width="195px" src="https://assets-global.website-files.com/650afb446f1dd5bd410f00cc/650b2cec6188ff54dd9b01e1_Logo.svg">
+      </a>
+    </td>
+  </tr>
+</table>

package/dist/index.d.cts

@@ -0,0 +1,240 @@
+import { DataURLOptions } from '@betterbugs/types';
+import { IMirror } from '@betterbugs/types';
+import { serializedElementNodeWithId } from '@betterbugs/types';
+import { serializedNode } from '@betterbugs/types';
+import { serializedNodeWithId } from '@betterbugs/types';
+
+export declare function absolutifyURLs(cssText: string | null, href: string): string;
+
+export declare function adaptCssForReplay(cssText: string, cache: BuildCache): string;
+
+export declare type BuildCache = {
+    stylesWithHoverClass: Map<string, string>;
+};
+
+export declare function buildNodeWithSN(n: serializedNodeWithId, options: {
+    doc: Document;
+    mirror: Mirror;
+    skipChild?: boolean;
+    hackCss: boolean;
+    afterAppend?: (n: Node, id: number) => unknown;
+    cache: BuildCache;
+}): Node | null;
+
+export declare function classMatchesRegex(node: Node | null, regex: RegExp, checkAncestors: boolean): boolean;
+
+export declare function cleanupSnapshot(): void;
+
+export declare function createCache(): BuildCache;
+
+export declare function createMirror(): Mirror;
+
+declare interface CSSImportRule_2 extends CSSRule {
+    readonly href: string;
+    readonly layerName: string | null;
+    readonly media: MediaList;
+    readonly styleSheet: CSSStyleSheet;
+    readonly supportsText?: string | null;
+}
+
+export declare type DialogAttributes = {
+    open: string;
+    rr_open_mode: 'modal' | 'non-modal';
+};
+
+export declare function escapeImportStatement(rule: CSSImportRule_2): string;
+
+export declare function extractFileExtension(path: string, baseURL?: string): string | null;
+
+export declare function fixSafariColons(cssStringified: string): string;
+
+export declare function genId(): number;
+
+export declare function getInputType(element: HTMLElement): Lowercase<string> | null;
+
+export declare interface ICanvas extends HTMLCanvasElement {
+    __context: string;
+}
+
+export declare type idNodeMap = Map<number, Node>;
+
+export declare function ignoreAttribute(tagName: string, name: string, _value: unknown): boolean;
+
+export declare const IGNORED_NODE = -2;
+
+export declare function is2DCanvasBlank(canvas: HTMLCanvasElement): boolean;
+
+export declare function isCSSImportRule(rule: CSSRule): rule is CSSImportRule_2;
+
+export declare function isCSSStyleRule(rule: CSSRule): rule is CSSStyleRule;
+
+export declare function isElement(n: Node): n is Element;
+
+export declare function isNativeShadowDom(shadowRoot: ShadowRoot): boolean;
+
+export declare function isNodeMetaEqual(a: serializedNode, b: serializedNode): boolean;
+
+export declare function isShadowRoot(n: Node): n is ShadowRoot;
+
+export declare type KeepIframeSrcFn = (src: string) => boolean;
+
+export declare function markCssSplits(cssText: string, style: HTMLStyleElement): string;
+
+export declare type MaskInputFn = (text: string, element: HTMLElement) => string;
+
+export declare type MaskInputOptions = Partial<{
+    color: boolean;
+    date: boolean;
+    'datetime-local': boolean;
+    email: boolean;
+    month: boolean;
+    number: boolean;
+    range: boolean;
+    search: boolean;
+    tel: boolean;
+    text: boolean;
+    time: boolean;
+    url: boolean;
+    week: boolean;
+    textarea: boolean;
+    select: boolean;
+    password: boolean;
+}>;
+
+export declare function maskInputValue({ element, maskInputOptions, tagName, type, value, maskInputFn, }: {
+    element: HTMLElement;
+    maskInputOptions: MaskInputOptions;
+    tagName: string;
+    type: string | null;
+    value: string | null;
+    maskInputFn?: MaskInputFn;
+}): string;
+
+export declare type MaskTextFn = (text: string, element: HTMLElement | null) => string;
+
+export declare class Mirror implements IMirror<Node> {
+    private idNodeMap;
+    private nodeMetaMap;
+    getId(n: Node | undefined | null): number;
+    getNode(id: number): Node | null;
+    getIds(): number[];
+    getMeta(n: Node): serializedNodeWithId | null;
+    removeNodeFromMap(n: Node): void;
+    has(id: number): boolean;
+    hasNode(node: Node): boolean;
+    add(n: Node, meta: serializedNodeWithId): void;
+    replace(id: number, n: Node): void;
+    reset(): void;
+}
+
+export declare function needMaskingText(node: Node, maskTextClass: string | RegExp, maskTextSelector: string | null, checkAncestors: boolean): boolean;
+
+export declare type nodeMetaMap = WeakMap<Node, serializedNodeWithId>;
+
+export declare function normalizeCssString(cssText: string, _testNoPxNorm?: boolean): string;
+
+export declare function rebuild(n: serializedNodeWithId, options: {
+    doc: Document;
+    onVisit?: (node: Node) => unknown;
+    hackCss?: boolean;
+    afterAppend?: (n: Node, id: number) => unknown;
+    cache: BuildCache;
+    mirror: Mirror;
+}): Node | null;
+
+export declare function serializeNodeWithId(n: Node, options: {
+    doc: Document;
+    mirror: Mirror;
+    blockClass: string | RegExp;
+    blockSelector: string | null;
+    maskTextClass: string | RegExp;
+    maskTextSelector: string | null;
+    skipChild: boolean;
+    inlineStylesheet: boolean;
+    newlyAddedElement?: boolean;
+    maskInputOptions?: MaskInputOptions;
+    needsMask?: boolean;
+    maskTextFn: MaskTextFn | undefined;
+    maskInputFn: MaskInputFn | undefined;
+    slimDOMOptions: SlimDOMOptions;
+    dataURLOptions?: DataURLOptions;
+    keepIframeSrcFn?: KeepIframeSrcFn;
+    inlineImages?: boolean;
+    recordCanvas?: boolean;
+    preserveWhiteSpace?: boolean;
+    onSerialize?: (n: Node) => unknown;
+    onIframeLoad?: (iframeNode: HTMLIFrameElement, node: serializedElementNodeWithId) => unknown;
+    iframeLoadTimeout?: number;
+    onStylesheetLoad?: (linkNode: HTMLLinkElement, node: serializedElementNodeWithId) => unknown;
+    stylesheetLoadTimeout?: number;
+    cssCaptured?: boolean;
+}): serializedNodeWithId | null;
+
+export declare function slimDOMDefaults(_slimDOMOptions: SlimDOMOptions | 'all' | true | false | undefined): Partial<{
+    script: boolean;
+    comment: boolean;
+    headFavicon: boolean;
+    headWhitespace: boolean;
+    headMetaDescKeywords: boolean;
+    headMetaSocial: boolean;
+    headMetaRobots: boolean;
+    headMetaHttpEquiv: boolean;
+    headMetaAuthorship: boolean;
+    headMetaVerification: boolean;
+    headTitleMutations: boolean;
+}>;
+
+export declare type SlimDOMOptions = Partial<{
+    script: boolean;
+    comment: boolean;
+    headFavicon: boolean;
+    headWhitespace: boolean;
+    headMetaDescKeywords: boolean;
+    headMetaSocial: boolean;
+    headMetaRobots: boolean;
+    headMetaHttpEquiv: boolean;
+    headMetaAuthorship: boolean;
+    headMetaVerification: boolean;
+    headTitleMutations: boolean;
+}>;
+
+export declare function snapshot(n: Document, options?: {
+    mirror?: Mirror;
+    blockClass?: string | RegExp;
+    blockSelector?: string | null;
+    maskTextClass?: string | RegExp;
+    maskTextSelector?: string | null;
+    inlineStylesheet?: boolean;
+    maskAllInputs?: boolean | MaskInputOptions;
+    maskTextFn?: MaskTextFn;
+    maskInputFn?: MaskInputFn;
+    slimDOM?: 'all' | boolean | SlimDOMOptions;
+    dataURLOptions?: DataURLOptions;
+    inlineImages?: boolean;
+    recordCanvas?: boolean;
+    preserveWhiteSpace?: boolean;
+    onSerialize?: (n: Node) => unknown;
+    onIframeLoad?: (iframeNode: HTMLIFrameElement, node: serializedElementNodeWithId) => unknown;
+    iframeLoadTimeout?: number;
+    onStylesheetLoad?: (linkNode: HTMLLinkElement, node: serializedElementNodeWithId) => unknown;
+    stylesheetLoadTimeout?: number;
+    keepIframeSrcFn?: KeepIframeSrcFn;
+}): serializedNodeWithId | null;
+
+export declare function splitCssText(cssText: string, style: HTMLStyleElement, _testNoPxNorm?: boolean): string[];
+
+export declare function stringifyRule(rule: CSSRule, sheetHref: string | null): string;
+
+export declare function stringifyStylesheet(s: CSSStyleSheet): string | null;
+
+export declare type tagMap = {
+    [key: string]: string;
+};
+
+export declare function toLowerCase<T extends string>(str: T): Lowercase<T>;
+
+export declare function transformAttribute(doc: Document, tagName: Lowercase<string>, name: Lowercase<string>, value: string | null): string | null;
+
+export declare function visitSnapshot(node: serializedNodeWithId, onVisit: (node: serializedNodeWithId) => unknown): void;
+
+export { }