xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Automate NPM package releases (#1119)

Browse Source
This commit is contained in:
Justin Halsall
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 19be06d936
commit 27caffecff
43 changed files with 1300 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.changeset/README.md Normal file
View File

@@ -0,0 +1,8 @@
# Changesets
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it [in our repository](https://github.com/changesets/changesets)
We have a quick list of common questions to get you started engaging with this project in
[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

11
.changeset/config.json Normal file
View File

@@ -0,0 +1,11 @@
{
"$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
"changelog": "@changesets/cli/changelog",
"commit": false,
"fixed": [],
"linked": [],
"access": "public",
"baseBranch": "master",
"updateInternalDependencies": "patch",
"ignore": []
}

13
.changeset/pre.json Normal file
View File

@@ -0,0 +1,13 @@
{
"mode": "pre",
"tag": "alpha",
"initialVersions": {
"rrdom": "0.1.7",
"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",
"@rrweb/types": "2.0.0-alpha.4"
},
"changesets": []
}

38
.github/workflows/release.yml vendored Normal file
View File

@@ -0,0 +1,38 @@
name: Release
on:
push:
branches:
- master
concurrency: ${{ github.workflow }}-${{ github.ref }}
jobs:
release:
name: Release
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout@v3
- name: Setup Node.js lts/*
uses: actions/setup-node@v3
with:
node-version: lts/*
- name: Install Dependencies
run: yarn
- name: Create Release Pull Request or Publish to npm
id: changesets
uses: changesets/action@v1
with:
publish: yarn run release
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
# - name: Send a Slack notification if a publish happens
# if: steps.changesets.outputs.published == 'true'
# # You can do something when a publish happens.
# run: my-slack-bot send-notification --message "A new version of ${GITHUB_REPOSITORY} was published!"

4
package.json
View File

@@ -18,6 +18,7 @@
"packages/*"
],
"devDependencies": {
"@changesets/cli": "^2.26.0",
"@monorepo-utils/workspaces-to-typescript-project-references": "^2.8.2",
"@typescript-eslint/eslint-plugin": "^5.25.0",
"@typescript-eslint/parser": "^5.25.0",
@@ -42,7 +43,8 @@
"repl": "cd packages/rrweb && npm run repl",
"live-stream": "cd packages/rrweb && yarn live-stream",
"lint": "yarn run concurrently --success=all -r -m=1 'yarn run markdownlint docs' 'yarn eslint packages/*/src --ext .ts,.tsx,.js,.jsx,.svelte'",
"lint:report": "yarn eslint --output-file eslint_report.json --format json packages/*/src --ext .ts,.tsx,.js,.jsx"
"lint:report": "yarn eslint --output-file eslint_report.json --format json packages/*/src --ext .ts,.tsx,.js,.jsx",
"release": "yarn build:all && changeset publish"
},
"resolutions": {
"**/jsdom/cssom": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz"

26
packages/rrdom-nodejs/src/document-nodejs.ts
View File

@@ -36,15 +36,16 @@ export class RRWindow {
export class RRDocument
extends BaseRRDocumentImpl(RRNode)
implements IRRDocument {
implements IRRDocument
{
readonly nodeName: '#document' = '#document';
private _nwsapi: NWSAPI;
get nwsapi() {
if (!this._nwsapi) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
this._nwsapi = nwsapi({
document: (this as unknown) as Document,
DOMException: (null as unknown) as new (
document: this as unknown as Document,
DOMException: null as unknown as new (
message?: string,
name?: string,
) => DOMException,
@@ -97,7 +98,7 @@ export class RRDocument
}
querySelectorAll(selectors: string): RRNode[] {
return (this.nwsapi.select(selectors) as unknown) as RRNode[];
return this.nwsapi.select(selectors) as unknown as RRNode[];
}
getElementsByTagName(tagName: string): RRElement[] {
@@ -220,7 +221,7 @@ export class RRElement extends BaseRRElementImpl(RRNode) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
get style() {
return (this._style as unknown) as CSSStyleDeclaration;
return this._style as unknown as CSSStyleDeclaration;
}
attachShadow(_init: ShadowRootInit): RRElement {
@@ -268,14 +269,14 @@ export class RRElement extends BaseRRElementImpl(RRNode) {
querySelectorAll(selectors: string): RRNode[] {
const result: RRElement[] = [];
if (this.ownerDocument !== null) {
((this.ownerDocument as RRDocument).nwsapi.select(
(this.ownerDocument as RRDocument).nwsapi.select(
selectors,
(this as unknown) as Element,
this as unknown as Element,
(element) => {
if (((element as unknown) as RRElement) !== this)
result.push((element as unknown) as RRElement);
if ((element as unknown as RRElement) !== this)
result.push(element as unknown as RRElement);
},
) as unknown) as RRNode[];
) as unknown as RRNode[];
}
return result;
}
@@ -393,6 +394,5 @@ interface RRElementTagNameMap {
video: RRMediaElement;
}
type RRElementType<
K extends keyof HTMLElementTagNameMap
> = K extends keyof RRElementTagNameMap ? RRElementTagNameMap[K] : RRElement;
type RRElementType<K extends keyof HTMLElementTagNameMap> =
K extends keyof RRElementTagNameMap ? RRElementTagNameMap[K] : RRElement;

10
packages/rrdom-nodejs/src/polyfill.ts
View File

@@ -51,10 +51,10 @@ export function polyfillRAF() {
}
}
(global as Window &
typeof globalThis).requestAnimationFrame = requestAnimationFrame;
(global as Window &
typeof globalThis).cancelAnimationFrame = cancelAnimationFrame;
(global as Window & typeof globalThis).requestAnimationFrame =
requestAnimationFrame;
(global as Window & typeof globalThis).cancelAnimationFrame =
cancelAnimationFrame;
}
/**
@@ -88,5 +88,5 @@ export function polyfillDocument() {
rrdom.documentElement!.appendChild(rrdom.createElement('head'));
rrdom.documentElement!.appendChild(rrdom.createElement('body'));
})();
global.document = (rrdom as unknown) as Document;
global.document = rrdom as unknown as Document;
}

14
packages/rrdom-nodejs/test/polyfill.test.ts
View File

@@ -26,7 +26,7 @@ describe('polyfill for nodejs', () => {
polyfillPerformance();
expect(global.performance).toBe(originalPerformance);
}
const fakePerformance = (jest.fn() as unknown) as Performance;
const fakePerformance = jest.fn() as unknown as Performance;
global.performance = fakePerformance;
polyfillPerformance();
expect(global.performance).toEqual(fakePerformance);
@@ -72,9 +72,11 @@ describe('polyfill for nodejs', () => {
});
it('should not polyfill requestAnimationFrame if it already exists', () => {
const fakeRequestAnimationFrame = (jest.fn() as unknown) as typeof global.requestAnimationFrame;
const fakeRequestAnimationFrame =
jest.fn() as unknown as typeof global.requestAnimationFrame;
global.requestAnimationFrame = fakeRequestAnimationFrame;
const fakeCancelAnimationFrame = (jest.fn() as unknown) as typeof global.cancelAnimationFrame;
const fakeCancelAnimationFrame =
jest.fn() as unknown as typeof global.cancelAnimationFrame;
global.cancelAnimationFrame = fakeCancelAnimationFrame;
polyfillRAF();
expect(global.requestAnimationFrame).toBe(fakeRequestAnimationFrame);
@@ -91,7 +93,7 @@ describe('polyfill for nodejs', () => {
});
it('should not polyfill Event type if it already exists', () => {
const fakeEvent = (jest.fn() as unknown) as typeof global.Event;
const fakeEvent = jest.fn() as unknown as typeof global.Event;
global.Event = fakeEvent;
polyfillEvent();
expect(global.Event).toBe(fakeEvent);
@@ -106,7 +108,7 @@ describe('polyfill for nodejs', () => {
});
it('should not polyfill Node type if it already exists', () => {
const fakeNode = (jest.fn() as unknown) as typeof global.Node;
const fakeNode = jest.fn() as unknown as typeof global.Node;
global.Node = fakeNode;
polyfillNode();
expect(global.Node).toBe(fakeNode);
@@ -121,7 +123,7 @@ describe('polyfill for nodejs', () => {
});
it('should not polyfill document object if it already exists', () => {
const fakeDocument = (jest.fn() as unknown) as typeof global.document;
const fakeDocument = jest.fn() as unknown as typeof global.document;
global.document = fakeDocument;
polyfillDocument();
expect(global.document).toBe(fakeDocument);

7
packages/rrdom/src/diff.ts
View File

@@ -301,10 +301,9 @@ function diffAfterUpdatingChildren(
oldTree.textContent !==
(newTree as IRRText | IRRComment | IRRCDATASection).data
)
oldTree.textContent = (newTree as
| IRRText
| IRRComment
| IRRCDATASection).data;
oldTree.textContent = (
newTree as IRRText | IRRComment | IRRCDATASection
).data;
break;
}
}

24
packages/rrdom/src/document.ts
View File

@@ -195,7 +195,7 @@ export class BaseRRNode implements IRRNode {
}
export function BaseRRDocumentImpl<
RRNode extends ConstrainedConstructor<IRRNode>
RRNode extends ConstrainedConstructor<IRRNode>,
>(RRNodeClass: RRNode) {
return class BaseRRDocument extends RRNodeClass implements IRRDocument {
public readonly nodeType: number = NodeType.DOCUMENT_NODE;
@@ -401,13 +401,14 @@ export function BaseRRDocumentImpl<
}
export function BaseRRDocumentTypeImpl<
RRNode extends ConstrainedConstructor<IRRNode>
RRNode extends ConstrainedConstructor<IRRNode>,
>(RRNodeClass: RRNode) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
return class BaseRRDocumentType
extends RRNodeClass
implements IRRDocumentType {
implements IRRDocumentType
{
public readonly nodeType: number = NodeType.DOCUMENT_TYPE_NODE;
public readonly RRNodeType = RRNodeType.DocumentType;
public readonly nodeName: string;
@@ -431,7 +432,7 @@ export function BaseRRDocumentTypeImpl<
}
export function BaseRRElementImpl<
RRNode extends ConstrainedConstructor<IRRNode>
RRNode extends ConstrainedConstructor<IRRNode>,
>(RRNodeClass: RRNode) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
@@ -479,9 +480,9 @@ export function BaseRRElementImpl<
}
public get style() {
const style = (this.attributes.style
? parseCSSText(this.attributes.style)
: {}) as CSSStyleDeclaration;
const style = (
this.attributes.style ? parseCSSText(this.attributes.style) : {}
) as CSSStyleDeclaration;
const hyphenateRE = /\B([A-Z])/g;
style.setProperty = (
name: string,
@@ -583,7 +584,7 @@ export function BaseRRElementImpl<
}
export function BaseRRMediaElementImpl<
RRElement extends ConstrainedConstructor<IRRElement>
RRElement extends ConstrainedConstructor<IRRElement>,
>(RRElementClass: RRElement) {
return class BaseRRMediaElement extends RRElementClass {
public currentTime?: number;
@@ -637,7 +638,7 @@ export function BaseRRTextImpl<RRNode extends ConstrainedConstructor<IRRNode>>(
}
export function BaseRRCommentImpl<
RRNode extends ConstrainedConstructor<IRRNode>
RRNode extends ConstrainedConstructor<IRRNode>,
>(RRNodeClass: RRNode) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
@@ -667,13 +668,14 @@ export function BaseRRCommentImpl<
}
export function BaseRRCDATASectionImpl<
RRNode extends ConstrainedConstructor<IRRNode>
RRNode extends ConstrainedConstructor<IRRNode>,
>(RRNodeClass: RRNode) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
return class BaseRRCDATASection
extends RRNodeClass
implements IRRCDATASection {
implements IRRCDATASection
{
public readonly nodeName: '#cdata-section' = '#cdata-section';
public readonly nodeType: number = NodeType.CDATA_SECTION_NODE;
public readonly RRNodeType = RRNodeType.CDATA;

5
packages/rrdom/src/index.ts
View File

@@ -193,9 +193,8 @@ interface RRElementTagNameMap {
video: RRMediaElement;
}
type RRElementType<
K extends keyof HTMLElementTagNameMap
> = K extends keyof RRElementTagNameMap ? RRElementTagNameMap[K] : RRElement;
type RRElementType<K extends keyof HTMLElementTagNameMap> =
K extends keyof RRElementTagNameMap ? RRElementTagNameMap[K] : RRElement;
function getValidTagName(element: HTMLElement): string {
// https://github.com/rrweb-io/rrweb-snapshot/issues/56

199
packages/rrdom/test/diff.test.ts
View File

@@ -65,9 +65,11 @@ function createTree(
type TNode = typeof rrDocument extends RRDocument ? RRNode : Node;
let root: TNode;
root = (rrDocument
? rrDocument.createElement(treeNode.tagName)
: document.createElement(treeNode.tagName)) as TNode;
root = (
rrDocument
? rrDocument.createElement(treeNode.tagName)
: document.createElement(treeNode.tagName)
) as TNode;
const sn = Object.assign({}, elementSn, {
tagName: treeNode.tagName,
@@ -75,9 +77,9 @@ function createTree(
});
if (rrDocument) {
rrDocument.mirror.add((root as unknown) as RRNode, sn);
rrDocument.mirror.add(root as unknown as RRNode, sn);
} else {
mirror.add((root as unknown) as Node, sn);
mirror.add(root as unknown as Node, sn);
}
if (treeNode.children)
@@ -320,8 +322,8 @@ describe('diff algorithm for rrdom', () => {
rrNode.attributes = { id: 'node1', class: 'node' };
diff(node, rrNode, replayer);
expect(((node as Node) as HTMLElement).id).toBe('node1');
expect(((node as Node) as HTMLElement).className).toBe('node');
expect((node as Node as HTMLElement).id).toBe('node1');
expect((node as Node as HTMLElement).className).toBe('node');
});
it('can update exist properties', () => {
@@ -330,9 +332,9 @@ describe('diff algorithm for rrdom', () => {
const sn = Object.assign({}, elementSn, { tagName });
mirror.add(node, sn);
((node as Node) as HTMLElement).id = 'element1';
((node as Node) as HTMLElement).className = 'element';
((node as Node) as HTMLElement).setAttribute('style', 'color: black');
(node as Node as HTMLElement).id = 'element1';
(node as Node as HTMLElement).className = 'element';
(node as Node as HTMLElement).setAttribute('style', 'color: black');
const rrDocument = new RRDocument();
const rrNode = rrDocument.createElement(tagName);
const sn2 = Object.assign({}, elementSn, { tagName });
@@ -340,17 +342,17 @@ describe('diff algorithm for rrdom', () => {
rrNode.attributes = { id: 'node1', class: 'node', style: 'color: white' };
diff(node, rrNode, replayer);
expect(((node as Node) as HTMLElement).id).toBe('node1');
expect(((node as Node) as HTMLElement).className).toBe('node');
expect(((node as Node) as HTMLElement).getAttribute('style')).toBe(
expect((node as Node as HTMLElement).id).toBe('node1');
expect((node as Node as HTMLElement).className).toBe('node');
expect((node as Node as HTMLElement).getAttribute('style')).toBe(
'color: white',
);
rrNode.attributes = { id: 'node2' };
diff(node, rrNode, replayer);
expect(((node as Node) as HTMLElement).id).toBe('node2');
expect(((node as Node) as HTMLElement).className).toBe('');
expect(((node as Node) as HTMLElement).getAttribute('style')).toBe(null);
expect((node as Node as HTMLElement).id).toBe('node2');
expect((node as Node as HTMLElement).className).toBe('');
expect((node as Node as HTMLElement).getAttribute('style')).toBe(null);
});
it('can delete old properties', () => {
@@ -359,9 +361,9 @@ describe('diff algorithm for rrdom', () => {
const sn = Object.assign({}, elementSn, { tagName });
mirror.add(node, sn);
((node as Node) as HTMLElement).id = 'element1';
((node as Node) as HTMLElement).className = 'element';
((node as Node) as HTMLElement).setAttribute('style', 'color: black');
(node as Node as HTMLElement).id = 'element1';
(node as Node as HTMLElement).className = 'element';
(node as Node as HTMLElement).setAttribute('style', 'color: black');
const rrDocument = new RRDocument();
const rrNode = rrDocument.createElement(tagName);
const sn2 = Object.assign({}, elementSn, { tagName });
@@ -369,15 +371,15 @@ describe('diff algorithm for rrdom', () => {
rrNode.attributes = { id: 'node1' };
diff(node, rrNode, replayer);
expect(((node as Node) as HTMLElement).id).toBe('node1');
expect(((node as Node) as HTMLElement).className).toBe('');
expect(((node as Node) as HTMLElement).getAttribute('style')).toBe(null);
expect((node as Node as HTMLElement).id).toBe('node1');
expect((node as Node as HTMLElement).className).toBe('');
expect((node as Node as HTMLElement).getAttribute('style')).toBe(null);
rrNode.attributes = { src: 'link' };
diff(node, rrNode, replayer);
expect(((node as Node) as HTMLElement).id).toBe('');
expect(((node as Node) as HTMLElement).className).toBe('');
expect(((node as Node) as HTMLElement).getAttribute('src')).toBe('link');
expect((node as Node as HTMLElement).id).toBe('');
expect((node as Node as HTMLElement).className).toBe('');
expect((node as Node as HTMLElement).getAttribute('src')).toBe('link');
});
it('can diff scroll positions', () => {
@@ -386,8 +388,8 @@ describe('diff algorithm for rrdom', () => {
const sn = Object.assign({}, elementSn, { tagName });
mirror.add(node, sn);
expect(((node as Node) as HTMLElement).scrollLeft).toEqual(0);
expect(((node as Node) as HTMLElement).scrollTop).toEqual(0);
expect((node as Node as HTMLElement).scrollLeft).toEqual(0);
expect((node as Node as HTMLElement).scrollTop).toEqual(0);
const rrDocument = new RRDocument();
const rrNode = rrDocument.createElement(tagName);
const sn2 = Object.assign({}, elementSn, { tagName });
@@ -396,8 +398,8 @@ describe('diff algorithm for rrdom', () => {
rrNode.scrollLeft = 100;
rrNode.scrollTop = 200;
diff(node, rrNode, replayer);
expect(((node as Node) as HTMLElement).scrollLeft).toEqual(100);
expect(((node as Node) as HTMLElement).scrollTop).toEqual(200);
expect((node as Node as HTMLElement).scrollLeft).toEqual(100);
expect((node as Node as HTMLElement).scrollTop).toEqual(200);
});
it('can diff properties for SVG elements', () => {
@@ -412,9 +414,7 @@ describe('diff algorithm for rrdom', () => {
jest.spyOn(Element.prototype, 'setAttributeNS');
diff(element, node, replayer);
expect(((element as Node) as SVGElement).getAttribute('xmlns')).toBe(
value,
);
expect((element as Node as SVGElement).getAttribute('xmlns')).toBe(value);
expect(SVGElement.prototype.setAttributeNS).toHaveBeenCalledWith(
'http://www.w3.org/2000/xmlns/',
'xmlns',
@@ -464,9 +464,7 @@ describe('diff algorithm for rrdom', () => {
expect(node.childNodes.length).toEqual(3);
expect(rrNode.childNodes.length).toEqual(3);
expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
1,
2,
3,
1, 2, 3,
]);
});
@@ -494,11 +492,7 @@ describe('diff algorithm for rrdom', () => {
expect(node.childNodes.length).toEqual(5);
expect(rrNode.childNodes.length).toEqual(5);
expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
1,
2,
3,
4,
5,
1, 2, 3, 4, 5,
]);
});
@@ -526,11 +520,7 @@ describe('diff algorithm for rrdom', () => {
expect(node.childNodes.length).toEqual(5);
expect(rrNode.childNodes.length).toEqual(5);
expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
1,
2,
3,
4,
5,
1, 2, 3, 4, 5,
]);
});
@@ -558,11 +548,7 @@ describe('diff algorithm for rrdom', () => {
expect(node.childNodes.length).toEqual(5);
expect(rrNode.childNodes.length).toEqual(5);
expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
1,
2,
3,
4,
5,
1, 2, 3, 4, 5,
]);
});
@@ -589,9 +575,7 @@ describe('diff algorithm for rrdom', () => {
expect(node.childNodes.length).toEqual(3);
expect(rrNode.childNodes.length).toEqual(3);
expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
1,
2,
3,
1, 2, 3,
]);
});
@@ -631,11 +615,7 @@ describe('diff algorithm for rrdom', () => {
) as Node;
expect(node.childNodes.length).toEqual(5);
expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
1,
2,
3,
4,
5,
1, 2, 3, 4, 5,
]);
const rrNode = createTree(
{
@@ -650,9 +630,7 @@ describe('diff algorithm for rrdom', () => {
expect(node.childNodes.length).toEqual(3);
expect(rrNode.childNodes.length).toEqual(3);
expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
3,
4,
5,
3, 4, 5,
]);
});
@@ -668,11 +646,7 @@ describe('diff algorithm for rrdom', () => {
) as Node;
expect(node.childNodes.length).toEqual(5);
expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
1,
2,
3,
4,
5,
1, 2, 3, 4, 5,
]);
const rrNode = createTree(
{
@@ -687,9 +661,7 @@ describe('diff algorithm for rrdom', () => {
expect(node.childNodes.length).toEqual(3);
expect(rrNode.childNodes.length).toEqual(3);
expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
1,
2,
3,
1, 2, 3,
]);
});
@@ -705,11 +677,7 @@ describe('diff algorithm for rrdom', () => {
) as Node;
expect(node.childNodes.length).toEqual(5);
expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
1,
2,
3,
4,
5,
1, 2, 3, 4, 5,
]);
const rrNode = createTree(
{
@@ -724,10 +692,7 @@ describe('diff algorithm for rrdom', () => {
expect(node.childNodes.length).toEqual(4);
expect(rrNode.childNodes.length).toEqual(4);
expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
1,
2,
4,
5,
1, 2, 4, 5,
]);
});
@@ -743,11 +708,7 @@ describe('diff algorithm for rrdom', () => {
) as Node;
expect(node.childNodes.length).toEqual(5);
expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
1,
2,
3,
4,
5,
1, 2, 3, 4, 5,
]);
const rrNode = createTree(
{
@@ -762,11 +723,7 @@ describe('diff algorithm for rrdom', () => {
expect(node.childNodes.length).toEqual(5);
expect(rrNode.childNodes.length).toEqual(5);
expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
2,
3,
4,
1,
5,
2, 3, 4, 1, 5,
]);
});
@@ -782,9 +739,7 @@ describe('diff algorithm for rrdom', () => {
) as Node;
expect(node.childNodes.length).toEqual(3);
expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
1,
2,
3,
1, 2, 3,
]);
const rrNode = createTree(
{
@@ -799,9 +754,7 @@ describe('diff algorithm for rrdom', () => {
expect(node.childNodes.length).toEqual(3);
expect(rrNode.childNodes.length).toEqual(3);
expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
2,
3,
1,
2, 3, 1,
]);
});
@@ -829,10 +782,7 @@ describe('diff algorithm for rrdom', () => {
expect(node.childNodes.length).toEqual(4);
expect(rrNode.childNodes.length).toEqual(4);
expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
1,
4,
2,
3,
1, 4, 2, 3,
]);
});
@@ -860,10 +810,7 @@ describe('diff algorithm for rrdom', () => {
expect(node.childNodes.length).toEqual(4);
expect(rrNode.childNodes.length).toEqual(4);
expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
4,
2,
3,
1,
4, 2, 3, 1,
]);
});
@@ -891,11 +838,7 @@ describe('diff algorithm for rrdom', () => {
expect(node.childNodes.length).toEqual(5);
expect(rrNode.childNodes.length).toEqual(5);
expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
4,
1,
2,
3,
6,
4, 1, 2, 3, 6,
]);
});
@@ -923,8 +866,7 @@ describe('diff algorithm for rrdom', () => {
expect(node.childNodes.length).toEqual(2);
expect(rrNode.childNodes.length).toEqual(2);
expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
4,
6,
4, 6,
]);
});
@@ -958,14 +900,7 @@ describe('diff algorithm for rrdom', () => {
expect(node.childNodes.length).toEqual(8);
expect(rrNode.childNodes.length).toEqual(8);
expect(Array.from(node.childNodes).map((c) => mirror.getId(c))).toEqual([
8,
7,
6,
5,
4,
3,
2,
1,
8, 7, 6, 5, 4, 3, 2, 1,
]);
});
@@ -1131,7 +1066,7 @@ describe('diff algorithm for rrdom', () => {
id: 1,
} as serializedNodeWithId);
expect(((node as Node) as HTMLElement).shadowRoot).toBeNull();
expect((node as Node as HTMLElement).shadowRoot).toBeNull();
const rrDocument = new RRDocument();
const rrNode = rrDocument.createElement(tagName);
@@ -1147,11 +1082,11 @@ describe('diff algorithm for rrdom', () => {
expect(rrNode.shadowRoot!.childNodes.length).toBe(1);
diff(node, rrNode, replayer, rrDocument.mirror);
expect(((node as Node) as HTMLElement).shadowRoot).not.toBeNull();
expect(
((node as Node) as HTMLElement).shadowRoot!.childNodes.length,
).toBe(1);
const childElement = ((node as Node) as HTMLElement).shadowRoot!
expect((node as Node as HTMLElement).shadowRoot).not.toBeNull();
expect((node as Node as HTMLElement).shadowRoot!.childNodes.length).toBe(
1,
);
const childElement = (node as Node as HTMLElement).shadowRoot!
.childNodes[0] as HTMLElement;
expect(childElement.tagName).toEqual('DIV');
});
@@ -1623,7 +1558,7 @@ describe('diff algorithm for rrdom', () => {
let result = createOrGetNode(rrNode, mirror, rrDocument.mirror);
expect(result).toBeInstanceOf(HTMLElement);
expect(mirror.getId(result)).toBe(0);
expect(((result as Node) as HTMLElement).tagName).toBe('DIV');
expect((result as Node as HTMLElement).tagName).toBe('DIV');
});
it('create a node from RRNode', () => {
@@ -1639,14 +1574,14 @@ describe('diff algorithm for rrdom', () => {
result = createOrGetNode(rrNode, mirror, rrDocument.mirror);
expect(result).toBeInstanceOf(Text);
expect(mirror.getId(result)).toBe(1);
expect(((result as Node) as Text).textContent).toBe(textContent);
expect((result as Node as Text).textContent).toBe(textContent);
rrNode = rrDocument.createComment(textContent);
rrDocument.mirror.add(rrNode, getDefaultSN(rrNode, 2));
result = createOrGetNode(rrNode, mirror, rrDocument.mirror);
expect(result).toBeInstanceOf(Comment);
expect(mirror.getId(result)).toBe(2);
expect(((result as Node) as Comment).textContent).toBe(textContent);
expect((result as Node as Comment).textContent).toBe(textContent);
rrNode = rrDocument.createCDATASection('');
rrDocument.mirror.add(rrNode, getDefaultSN(rrNode, 3));
@@ -1665,9 +1600,9 @@ describe('diff algorithm for rrdom', () => {
let result = createOrGetNode(rrNode, mirror, rrDocument.mirror);
expect(result).toBeInstanceOf(DocumentType);
expect(mirror.getId(result)).toBe(0);
expect(((result as Node) as DocumentType).name).toEqual('html');
expect(((result as Node) as DocumentType).publicId).toEqual(publicId);
expect(((result as Node) as DocumentType).systemId).toEqual('');
expect((result as Node as DocumentType).name).toEqual('html');
expect((result as Node as DocumentType).publicId).toEqual(publicId);
expect((result as Node as DocumentType).systemId).toEqual('');
});
it('can get a node if it already exists', () => {
@@ -1687,7 +1622,7 @@ describe('diff algorithm for rrdom', () => {
expect(result).toBeInstanceOf(Text);
expect(mirror.getId(result)).toBe(0);
expect(((result as Node) as Text).textContent).toBe(textContent);
expect((result as Node as Text).textContent).toBe(textContent);
expect(result).toEqual(text);
// To make sure the existed text node is used.
expect(mirror.getMeta(result)).toEqual(mirror.getMeta(text));
@@ -1696,7 +1631,7 @@ describe('diff algorithm for rrdom', () => {
describe('apply virtual style rules to node', () => {
beforeEach(() => {
const dummyReplayer = new Replayer(([
const dummyReplayer = new Replayer([
{
type: EventType.DomContentLoaded,
timestamp: 0,
@@ -1709,7 +1644,7 @@ describe('diff algorithm for rrdom', () => {
},
timestamp: 0,
},
] as unknown) as eventWithTime[]);
] as unknown as eventWithTime[]);
replayer.applyStyleSheetMutation = (
data: styleDeclarationData | styleSheetRuleData,
styleSheet: CSSStyleSheet,

2
packages/rrdom/test/document.test.ts
View File

@@ -424,7 +424,7 @@ describe('Basic RRDocument implementation', () => {
expect(node.removeAttribute).toBeDefined();
expect(node.attachShadow).toBeDefined();
expect(node.dispatchEvent).toBeDefined();
expect(node.dispatchEvent((null as unknown) as Event)).toBeTruthy();
expect(node.dispatchEvent(null as unknown as Event)).toBeTruthy();
expect(node.toString()).toEqual('DIV id="id" class="className" ');
});

8
packages/rrdom/test/utils.ts
View File

@@ -1,7 +1,7 @@
import * as rollup from 'rollup';
import * as typescript from 'rollup-plugin-typescript2';
import resolve from '@rollup/plugin-node-resolve';
const _typescript = (typescript as unknown) as typeof typescript.default;
const _typescript = typescript as unknown as typeof typescript.default;
/**
* Use rollup to compile an input TS script into JS code string.
@@ -10,10 +10,10 @@ export async function compileTSCode(inputFilePath: string) {
const bundle = await rollup.rollup({
input: inputFilePath,
plugins: [
(resolve() as unknown) as rollup.Plugin,
(_typescript({
resolve() as unknown as rollup.Plugin,
_typescript({
tsconfigOverride: { compilerOptions: { module: 'ESNext' } },
}) as unknown) as rollup.Plugin,
}) as unknown as rollup.Plugin,
],
});
const {

4
packages/rrdom/test/virtual-dom.test.ts
View File

@@ -98,7 +98,7 @@ describe('RRDocument for browser environment', () => {
// build from element
expect(mirror.getMeta(document.documentElement)).toBeNull();
rrNode = buildFromNode(
(document.documentElement as unknown) as Node,
document.documentElement as unknown as Node,
rrdom,
mirror,
)!;
@@ -378,7 +378,7 @@ describe('RRDocument for browser environment', () => {
expect(dom.mirror.getId(node1)).toEqual(0);
const node2 = dom.createTextNode('text');
expect(dom.mirror.getId(node2)).toEqual(-1);
expect(dom.mirror.getId((null as unknown) as RRNode)).toEqual(-1);
expect(dom.mirror.getId(null as unknown as RRNode)).toEqual(-1);
});
it('has() should return whether the mirror has an ID', () => {

4
packages/rrweb-snapshot/src/rebuild.ts
View File

@@ -267,8 +267,8 @@ function buildNode(
rr_dataURL: string;
};
// If the canvas element is created in RRDom runtime (seeking to a time point), the canvas context isn't supported. So the data has to be stored and not handled until diff process. https://github.com/rrweb-io/rrweb/pull/944
if (((node as unknown) as RRCanvasElement).RRNodeType)
((node as unknown) as RRCanvasElement).rr_dataURL = value.toString();
if ((node as unknown as RRCanvasElement).RRNodeType)
(node as unknown as RRCanvasElement).rr_dataURL = value.toString();
} else if (tagName === 'img' && name === 'rr_dataURL') {
const image = node as HTMLImageElement;
if (!image.currentSrc.startsWith('data:')) {

2
packages/rrweb-snapshot/src/utils.ts
View File

@@ -110,7 +110,7 @@ export class Mirror implements IMirror<Node> {
if (n.childNodes) {
n.childNodes.forEach((childNode) =>
this.removeNodeFromMap((childNode as unknown) as Node),
this.removeNodeFromMap(childNode as unknown as Node),
);
}
}

8
packages/rrweb-snapshot/test/integration.test.ts
View File

@@ -8,7 +8,7 @@ import * as typescript from 'rollup-plugin-typescript2';
import * as assert from 'assert';
import { waitForRAF } from './utils';
const _typescript = (typescript as unknown) as () => rollup.Plugin;
const _typescript = typescript as unknown as () => rollup.Plugin;
const htmlFolder = path.join(__dirname, 'html');
const htmls = fs.readdirSync(htmlFolder).map((filePath) => {
@@ -129,7 +129,8 @@ describe('integration tests', function (this: ISuite) {
});
}
await waitForRAF(page);
const rebuildHtml = ((await page.evaluate(`${code}
const rebuildHtml = (
(await page.evaluate(`${code}
const x = new XMLSerializer();
const snap = rrweb.snapshot(document);
let out = x.serializeToString(rrweb.rebuild(snap, { doc: document }));
@@ -138,7 +139,8 @@ describe('integration tests', function (this: ISuite) {
out = out.replace(' xmlns=\"http://www.w3.org/1999/xhtml\"', '');
}
out; // return
`)) as string)
`)) as string
)
.replace(/\n\n/g, '')
.replace(
/blob:http:\/\/localhost:\d+\/[0-9a-z\-]+/,

18
packages/rrweb/src/plugins/console/record/index.ts
View File

@@ -90,9 +90,9 @@ function initLogObserver(
win: IWindow, // top window or in an iframe
options: LogRecordOptions,
): listenerHandler {
const logOptions = (options
? Object.assign({}, defaultLogOptions, options)
: defaultLogOptions) as {
const logOptions = (
options ? Object.assign({}, defaultLogOptions, options) : defaultLogOptions
) as {
level: LogLevel[];
lengthThreshold: number;
stringifyOptions?: StringifyOptions;
@@ -117,9 +117,9 @@ function initLogObserver(
const errorHandler = (event: ErrorEvent) => {
const message = event.message,
error = event.error as Error;
const trace: string[] = ErrorStackParser.parse(
error,
).map((stackFrame: StackFrame) => stackFrame.toString());
const trace: string[] = ErrorStackParser.parse(error).map(
(stackFrame: StackFrame) => stackFrame.toString(),
);
const payload = [stringify(message, logOptions.stringifyOptions)];
cb({
level: 'error',
@@ -149,9 +149,9 @@ function initLogObserver(
stringify(event.reason, logOptions.stringifyOptions),
];
}
const trace: string[] = ErrorStackParser.parse(
error,
).map((stackFrame: StackFrame) => stackFrame.toString());
const trace: string[] = ErrorStackParser.parse(error).map(
(stackFrame: StackFrame) => stackFrame.toString(),
);
cb({
level: 'error',
trace,

2
packages/rrweb/src/plugins/console/record/stringify.ts
View File

@@ -123,7 +123,7 @@ export function stringify(
if (value instanceof Event) {
const eventResult: Record<string, unknown> = {};
for (const eventKey in value) {
const eventValue = ((value as unknown) as Record<string, unknown>)[
const eventValue = (value as unknown as Record<string, unknown>)[
eventKey
];
if (Array.isArray(eventValue)) {

10
packages/rrweb/src/plugins/console/replay/index.ts
View File

@@ -59,10 +59,10 @@ class LogReplayPlugin {
for (const level of this.config.level!) {
if (level === 'trace') {
replayLogger[level] = (data: LogData) => {
const logger = ((console.log as unknown) as PatchedConsoleLog)[
const logger = (console.log as unknown as PatchedConsoleLog)[
ORIGINAL_ATTRIBUTE_NAME
]
? ((console.log as unknown) as PatchedConsoleLog)[
? (console.log as unknown as PatchedConsoleLog)[
ORIGINAL_ATTRIBUTE_NAME
]
: console.log;
@@ -73,10 +73,10 @@ class LogReplayPlugin {
};
} else {
replayLogger[level] = (data: LogData) => {
const logger = ((console[level] as unknown) as PatchedConsoleLog)[
const logger = (console[level] as unknown as PatchedConsoleLog)[
ORIGINAL_ATTRIBUTE_NAME
]
? ((console[level] as unknown) as PatchedConsoleLog)[
? (console[level] as unknown as PatchedConsoleLog)[
ORIGINAL_ATTRIBUTE_NAME
]
: console[level];
@@ -118,7 +118,7 @@ export const getReplayConsolePlugin: (
event.type === EventType.IncrementalSnapshot &&
event.data.source === (IncrementalSource.Log as IncrementalSource)
) {
logData = (event.data as unknown) as LogData;
logData = event.data as unknown as LogData;
} else if (
event.type === EventType.Plugin &&
event.data.plugin === PLUGIN_NAME

2
packages/rrweb/src/plugins/sequential-id/replay/index.ts
View File

@@ -22,7 +22,7 @@ export const getReplaySequentialIdPlugin: (
return {
handler(event: eventWithTime) {
if (key in event) {
const id = ((event as unknown) as Record<string, number>)[key];
const id = (event as unknown as Record<string, number>)[key];
if (id !== currentId) {
console.error(
`[sequential-id-plugin]: expect to get an id with value "${currentId}", but got "${id}"`,

3
packages/rrweb/src/record/cross-origin-iframe-mirror.ts
View File

@@ -1,6 +1,7 @@
import type { ICrossOriginIframeMirror } from '@rrweb/types';
export default class CrossOriginIframeMirror
implements ICrossOriginIframeMirror {
implements ICrossOriginIframeMirror
{
private iframeIdToRemoteIdMap: WeakMap<
HTMLIFrameElement,
Map<number, number>

12
packages/rrweb/src/record/iframe-manager.ts
View File

@@ -8,16 +8,12 @@ import type { StylesheetManager } from './stylesheet-manager';
export class IframeManager {
private iframes: WeakMap<HTMLIFrameElement, true> = new WeakMap();
private crossOriginIframeMap: WeakMap<
MessageEventSource,
HTMLIFrameElement
> = new WeakMap();
private crossOriginIframeMap: WeakMap<MessageEventSource, HTMLIFrameElement> =
new WeakMap();
public crossOriginIframeMirror = new CrossOriginIframeMirror(genId);
public crossOriginIframeStyleMirror: CrossOriginIframeMirror;
public crossOriginIframeRootIdMap: WeakMap<
HTMLIFrameElement,
number
> = new WeakMap();
public crossOriginIframeRootIdMap: WeakMap<HTMLIFrameElement, number> =
new WeakMap();
private mirror: Mirror;
private mutationCb: mutationCallBack;
private wrappedEmit: (e: eventWithTime, isCheckout?: boolean) => void;

4
packages/rrweb/src/record/index.ts
View File

@@ -173,9 +173,9 @@ function record<T = eventWithTime>(
// Disable packing events which will be emitted to parent frames.
!passEmitsToParent
) {
e = (packFn(e) as unknown) as eventWithTime;
e = packFn(e) as unknown as eventWithTime;
}
return (e as unknown) as T;
return e as unknown as T;
};
wrappedEmit = (e: eventWithTime, isCheckout?: boolean) => {
if (

48
packages/rrweb/src/record/mutation.ts
View File

@@ -180,29 +180,31 @@ export default class MutationBuffer {
private processedNodeManager: observerParam['processedNodeManager'];
public init(options: MutationBufferParam) {
([
'mutationCb',
'blockClass',
'blockSelector',
'maskTextClass',
'maskTextSelector',
'inlineStylesheet',
'maskInputOptions',
'maskTextFn',
'maskInputFn',
'keepIframeSrcFn',
'recordCanvas',
'inlineImages',
'slimDOMOptions',
'dataURLOptions',
'doc',
'mirror',
'iframeManager',
'stylesheetManager',
'shadowDomManager',
'canvasManager',
'processedNodeManager',
] as const).forEach((key) => {
(
[
'mutationCb',
'blockClass',
'blockSelector',
'maskTextClass',
'maskTextSelector',
'inlineStylesheet',
'maskInputOptions',
'maskTextFn',
'maskInputFn',
'keepIframeSrcFn',
'recordCanvas',
'inlineImages',
'slimDOMOptions',
'dataURLOptions',
'doc',
'mirror',
'iframeManager',
'stylesheetManager',
'shadowDomManager',
'canvasManager',
'processedNodeManager',
] as const
).forEach((key) => {
// just a type trick, the runtime result is correct
this[key] = options[key] as never;
});

33
packages/rrweb/src/record/observer.ts
View File

@@ -94,19 +94,18 @@ export function initMutationObserver(
* window.__rrMutationObserver = MutationObserver
*/
(window as WindowWithStoredMutationObserver).__rrMutationObserver;
const angularZoneSymbol = (window as WindowWithAngularZone)?.Zone?.__symbol__?.(
'MutationObserver',
);
const angularZoneSymbol = (
window as WindowWithAngularZone
)?.Zone?.__symbol__?.('MutationObserver');
if (
angularZoneSymbol &&
((window as unknown) as Record<string, typeof MutationObserver>)[
(window as unknown as Record<string, typeof MutationObserver>)[
angularZoneSymbol
]
) {
mutationObserverCtor = ((window as unknown) as Record<
string,
typeof MutationObserver
>)[angularZoneSymbol];
mutationObserverCtor = (
window as unknown as Record<string, typeof MutationObserver>
)[angularZoneSymbol];
}
const observer = new (mutationObserverCtor as new (
callback: MutationCallback,
@@ -423,9 +422,9 @@ function initInputObserver({
}
}
const events = sampling.input === 'last' ? ['change'] : ['input', 'change'];
const handlers: Array<
listenerHandler | hookResetter
> = events.map((eventName) => on(eventName, eventHandler, doc));
const handlers: Array<listenerHandler | hookResetter> = events.map(
(eventName) => on(eventName, eventHandler, doc),
);
const currentWindow = doc.defaultView;
if (!currentWindow) {
return () => {
@@ -891,12 +890,8 @@ function initMediaInteractionObserver({
) {
return;
}
const {
currentTime,
volume,
muted,
playbackRate,
} = target as HTMLMediaElement;
const { currentTime, volume, muted, playbackRate } =
target as HTMLMediaElement;
mediaInteractionCb({
type,
id: mirror.getId(target as Node),
@@ -931,7 +926,7 @@ function initFontObserver({ fontCb, doc }: observerParam): listenerHandler {
const fontMap = new WeakMap<FontFace, fontParam>();
const originalFontFace = win.FontFace;
win.FontFace = (function FontFace(
win.FontFace = function FontFace(
family: string,
source: string | ArrayBufferLike,
descriptors?: FontFaceDescriptors,
@@ -947,7 +942,7 @@ function initFontObserver({ fontCb, doc }: observerParam): listenerHandler {
: JSON.stringify(Array.from(new Uint8Array(source))),
});
return fontFace;
} as unknown) as typeof FontFace;
} as unknown as typeof FontFace;
const restoreHandler = patch(
doc.fonts,

3
packages/rrweb/src/record/observers/canvas/canvas-manager.ts
View File

@@ -116,7 +116,8 @@ export class CanvasManager {
blockSelector,
);
const snapshotInProgressMap: Map<number, boolean> = new Map();
const worker = new ImageBitmapDataURLWorker() as ImageBitmapDataURLRequestWorker;
const worker =
new ImageBitmapDataURLWorker() as ImageBitmapDataURLRequestWorker;
worker.onmessage = (e) => {
const { id } = e.data;
snapshotInProgressMap.set(id, false);

10
packages/rrweb/src/record/shadow-dom-manager.ts
View File

@@ -81,7 +81,7 @@ export class ShadowDomManager {
scrollCb: this.scrollCb,
// https://gist.github.com/praveenpuglia/0832da687ed5a5d7a0907046c9ef1813
// scroll is not allowed to pass the boundary, so we need to listen the shadow document
doc: (shadowRoot as unknown) as Document,
doc: shadowRoot as unknown as Document,
mirror: this.mirror,
});
// Defer this to avoid adoptedStyleSheet events being created before the full snapshot is created or attachShadow action is recorded.
@@ -113,9 +113,11 @@ export class ShadowDomManager {
const manager = this;
this.restorePatches.push(
patch(
(iframeElement.contentWindow as Window & {
HTMLElement: { prototype: HTMLElement };
}).HTMLElement.prototype,
(
iframeElement.contentWindow as Window & {
HTMLElement: { prototype: HTMLElement };
}
).HTMLElement.prototype,
'attachShadow',
function (original: (init: ShadowRootInit) => ShadowRoot) {
return function (this: HTMLElement, option: ShadowRootInit) {

2
packages/rrweb/src/replay/canvas/2d.ts
View File

@@ -20,7 +20,7 @@ export default async function canvasMutation({
if (mutation.setter) {
// skip some read-only type checks
((ctx as unknown) as Record<string, unknown>)[mutation.property] =
(ctx as unknown as Record<string, unknown>)[mutation.property] =
mutation.args[0];
return;
}

26
packages/rrweb/src/replay/index.ts
View File

@@ -434,9 +434,10 @@ export class Replayer {
public getMetaData(): playerMetaData {
const firstEvent = this.service.state.context.events[0];
const lastEvent = this.service.state.context.events[
this.service.state.context.events.length - 1
];
const lastEvent =
this.service.state.context.events[
this.service.state.context.events.length - 1
];
return {
startTime: firstEvent.timestamp,
endTime: lastEvent.timestamp,
@@ -855,7 +856,7 @@ export class Replayer {
const collected: AppendedIframe[] = [];
const afterAppend = (builtNode: Node, id: number) => {
this.collectIframeAndAttachDocument(collected, builtNode);
const sn = (mirror as TMirror).getMeta((builtNode as unknown) as TNode);
const sn = (mirror as TMirror).getMeta(builtNode as unknown as TNode);
if (
sn?.type === NodeType.Element &&
sn?.tagName.toUpperCase() === 'HTML'
@@ -1263,9 +1264,9 @@ export class Replayer {
if (this.usingVirtualDom) {
if (d.styleId) this.constructedStyleMutations.push(d);
else if (d.id)
(this.virtualDom.mirror.getNode(
d.id,
) as RRStyleElement | null)?.rules.push(d);
(
this.virtualDom.mirror.getNode(d.id) as RRStyleElement | null
)?.rules.push(d);
} else this.applyStyleSheetMutation(d);
break;
}
@@ -1916,10 +1917,10 @@ export class Replayer {
styleSheet: CSSStyleSheet,
) {
if (data.set) {
const rule = (getNestedRule(
const rule = getNestedRule(
styleSheet.rules,
data.index,
) as unknown) as CSSStyleRule;
) as unknown as CSSStyleRule;
rule.style.setProperty(
data.set.property,
data.set.value,
@@ -1928,10 +1929,10 @@ export class Replayer {
}
if (data.remove) {
const rule = (getNestedRule(
const rule = getNestedRule(
styleSheet.rules,
data.index,
) as unknown) as CSSStyleRule;
) as unknown as CSSStyleRule;
rule.style.removeProperty(data.remove.property);
}
}
@@ -1977,7 +1978,8 @@ export class Replayer {
.filter((style) => style !== null) as CSSStyleSheet[];
if (hasShadowRoot(targetHost))
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
(targetHost as HTMLElement).shadowRoot!.adoptedStyleSheets = stylesToAdopt;
(targetHost as HTMLElement).shadowRoot!.adoptedStyleSheets =
stylesToAdopt;
else if (targetHost.nodeName === '#document')
(targetHost as Document).adoptedStyleSheets = stylesToAdopt;

3
packages/rrweb/src/types.ts
View File

@@ -209,4 +209,5 @@ export type CrossOriginIframeMessageEventContent<T = eventWithTime> = {
origin: string;
isCheckout?: boolean;
};
export type CrossOriginIframeMessageEvent = MessageEvent<CrossOriginIframeMessageEventContent>;
export type CrossOriginIframeMessageEvent =
MessageEvent<CrossOriginIframeMessageEventContent>;

10
packages/rrweb/src/utils.ts
View File

@@ -281,14 +281,14 @@ export function isTouchEvent(
export function polyfill(win = window) {
if ('NodeList' in win && !win.NodeList.prototype.forEach) {
// eslint-disable-next-line @typescript-eslint/unbound-method
win.NodeList.prototype.forEach = (Array.prototype
.forEach as unknown) as NodeList['forEach'];
win.NodeList.prototype.forEach = Array.prototype
.forEach as unknown as NodeList['forEach'];
}
if ('DOMTokenList' in win && !win.DOMTokenList.prototype.forEach) {
// eslint-disable-next-line @typescript-eslint/unbound-method
win.DOMTokenList.prototype.forEach = (Array.prototype
.forEach as unknown) as DOMTokenList['forEach'];
win.DOMTokenList.prototype.forEach = Array.prototype
.forEach as unknown as DOMTokenList['forEach'];
}
// https://github.com/Financial-Times/polyfill-service/pull/183
@@ -433,7 +433,7 @@ export function getBaseDimension(
export function hasShadowRoot<T extends Node | RRNode>(
n: T,
): n is T & { shadowRoot: ShadowRoot } {
return Boolean(((n as unknown) as Element)?.shadowRoot);
return Boolean((n as unknown as Element)?.shadowRoot);
}
export function getNestedRule(

6
packages/rrweb/test/events/style-sheet-rule-events.ts
View File

@@ -147,8 +147,7 @@ const events: eventWithTime[] = [
id: 101,
adds: [
{
rule:
'.css-added-at-500-overwritten-at-3000 {border: 1px solid blue;}',
rule: '.css-added-at-500-overwritten-at-3000 {border: 1px solid blue;}',
index: 1,
},
],
@@ -163,8 +162,7 @@ const events: eventWithTime[] = [
id: 105,
adds: [
{
rule:
'.css-added-at-1000-deleted-at-2500{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-width:60rem;min-height:100vh;color:blue;}',
rule: '.css-added-at-1000-deleted-at-2500{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-width:60rem;min-height:100vh;color:blue;}',
index: 2,
},
],

7
packages/rrweb/test/integration.test.ts
View File

@@ -502,7 +502,8 @@ describe('record integration tests', function (this: ISuite) {
await page.goto('about:blank');
await page.setContent(
getHtml('log.html', {
plugins: ('[rrwebConsoleRecord.getRecordConsolePlugin()]' as unknown) as RecordPlugin<unknown>[],
plugins:
'[rrwebConsoleRecord.getRecordConsolePlugin()]' as unknown as RecordPlugin<unknown>[],
}),
);
@@ -790,8 +791,8 @@ describe('record integration tests', function (this: ISuite) {
await page.evaluate(() => {
// get contentDocument of iframe five
const contentDocument1 = document.querySelector('iframe')!
.contentDocument!;
const contentDocument1 =
document.querySelector('iframe')!.contentDocument!;
// create shadow dom #1
contentDocument1.body.attachShadow({ mode: 'open' });
contentDocument1.body.shadowRoot!.appendChild(

2
packages/rrweb/test/packer.test.ts
View File

@@ -17,7 +17,7 @@ describe('pack', () => {
describe('unpack', () => {
it('is compatible with unpacked data 1', () => {
const result = unpack((event as unknown) as string);
const result = unpack(event as unknown as string);
expect(result).toEqual(event);
});

97
packages/rrweb/test/record.test.ts
View File

@@ -96,9 +96,9 @@ describe('record', function (this: ISuite) {
it('will only have one full snapshot without checkout config', async () => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
const { record } = (window as unknown as IWindow).rrweb;
record({
emit: ((window as unknown) as IWindow).emit,
emit: (window as unknown as IWindow).emit,
});
});
let count = 30;
@@ -120,9 +120,9 @@ describe('record', function (this: ISuite) {
it('can checkout full snapshot by count', async () => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
const { record } = (window as unknown as IWindow).rrweb;
record({
emit: ((window as unknown) as IWindow).emit,
emit: (window as unknown as IWindow).emit,
checkoutEveryNth: 10,
});
});
@@ -149,9 +149,9 @@ describe('record', function (this: ISuite) {
it('can checkout full snapshot by time', async () => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
const { record } = (window as unknown as IWindow).rrweb;
record({
emit: ((window as unknown) as IWindow).emit,
emit: (window as unknown as IWindow).emit,
checkoutEveryNms: 500,
});
});
@@ -182,9 +182,9 @@ describe('record', function (this: ISuite) {
it('is safe to checkout during async callbacks', async () => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
const { record } = (window as unknown as IWindow).rrweb;
record({
emit: ((window as unknown) as IWindow).emit,
emit: (window as unknown as IWindow).emit,
checkoutEveryNth: 2,
});
const p = document.createElement('p');
@@ -208,9 +208,9 @@ describe('record', function (this: ISuite) {
it('should record scroll position', async () => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
const { record } = (window as unknown as IWindow).rrweb;
record({
emit: ((window as unknown) as IWindow).emit,
emit: (window as unknown as IWindow).emit,
});
const p = document.createElement('p');
p.innerText = 'testtesttesttesttesttesttesttesttesttest';
@@ -225,9 +225,9 @@ describe('record', function (this: ISuite) {
it('should record selection event', async () => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
const { record } = (window as unknown as IWindow).rrweb;
record({
emit: ((window as unknown) as IWindow).emit,
emit: (window as unknown as IWindow).emit,
});
const startNode = document.createElement('p');
@@ -266,9 +266,9 @@ describe('record', function (this: ISuite) {
it('can add custom event', async () => {
await ctx.page.evaluate(() => {
const { record, addCustomEvent } = ((window as unknown) as IWindow).rrweb;
const { record, addCustomEvent } = (window as unknown as IWindow).rrweb;
record({
emit: ((window as unknown) as IWindow).emit,
emit: (window as unknown as IWindow).emit,
});
addCustomEvent<number>('tag1', 1);
addCustomEvent<{ a: string }>('tag2', {
@@ -281,10 +281,10 @@ describe('record', function (this: ISuite) {
it('captures stylesheet rules', async () => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
const { record } = (window as unknown as IWindow).rrweb;
record({
emit: ((window as unknown) as IWindow).emit,
emit: (window as unknown as IWindow).emit,
});
const styleElement = document.createElement('style');
@@ -331,10 +331,10 @@ describe('record', function (this: ISuite) {
const captureNestedStylesheetRulesTest = async () => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
const { record } = (window as unknown as IWindow).rrweb;
record({
emit: ((window as unknown) as IWindow).emit,
emit: (window as unknown as IWindow).emit,
});
const styleElement = document.createElement('style');
@@ -392,10 +392,10 @@ describe('record', function (this: ISuite) {
it('captures style property changes', async () => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
const { record } = (window as unknown as IWindow).rrweb;
record({
emit: ((window as unknown) as IWindow).emit,
emit: (window as unknown as IWindow).emit,
ignoreCSSAttributes: new Set(['color']),
});
@@ -428,7 +428,7 @@ describe('record', function (this: ISuite) {
it('captures inserted style text nodes correctly', async () => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
const { record } = (window as unknown as IWindow).rrweb;
const styleEl = document.createElement(`style`);
styleEl.append(document.createTextNode('div { color: red; }'));
@@ -436,7 +436,7 @@ describe('record', function (this: ISuite) {
document.head.appendChild(styleEl);
record({
emit: ((window as unknown) as IWindow).emit,
emit: (window as unknown as IWindow).emit,
});
styleEl.append(document.createTextNode('span { color: orange; }'));
@@ -462,11 +462,11 @@ describe('record', function (this: ISuite) {
});
await waitForRAF(ctx.page);
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
const { record } = (window as unknown as IWindow).rrweb;
record({
inlineStylesheet: true,
emit: ((window as unknown) as IWindow).emit,
emit: (window as unknown as IWindow).emit,
});
});
await waitForRAF(ctx.page);
@@ -487,14 +487,15 @@ describe('record', function (this: ISuite) {
document.adoptedStyleSheets = [sheet];
const iframe = document.querySelector('iframe');
const sheet2 = new (iframe!.contentWindow! as Window &
typeof globalThis).CSSStyleSheet();
const sheet2 = new (
iframe!.contentWindow! as Window & typeof globalThis
).CSSStyleSheet();
// Add stylesheet to an IFrame document.
iframe!.contentDocument!.adoptedStyleSheets = [sheet2];
iframe!.contentDocument!.body.innerHTML = '<h1>h1 in iframe</h1>';
const { rrweb, emit } = (window as unknown) as IWindow;
const { rrweb, emit } = window as unknown as IWindow;
rrweb.record({
emit,
});
@@ -568,7 +569,7 @@ describe('record', function (this: ISuite) {
sheet2.replaceSync!('div {font-size: large;}');
shadowHost.shadowRoot!.adoptedStyleSheets = [sheet2];
const { rrweb, emit } = (window as unknown) as IWindow;
const { rrweb, emit } = window as unknown as IWindow;
rrweb.record({
emit,
});
@@ -602,7 +603,7 @@ describe('record', function (this: ISuite) {
sheet.replaceSync!('h1 {color: blue;}');
shadowHost.shadowRoot!.adoptedStyleSheets = [sheet];
const { rrweb, emit } = (window as unknown) as IWindow;
const { rrweb, emit } = window as unknown as IWindow;
rrweb.record({
emit,
});
@@ -639,11 +640,11 @@ describe('record', function (this: ISuite) {
});
await waitForRAF(ctx.page);
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
const { record } = (window as unknown as IWindow).rrweb;
record({
inlineStylesheet: true,
emit: ((window as unknown) as IWindow).emit,
emit: (window as unknown as IWindow).emit,
});
});
await waitForRAF(ctx.page);
@@ -683,11 +684,11 @@ describe('record', function (this: ISuite) {
it('captures stylesheets that are still loading', async () => {
ctx.page.evaluate((serverURL) => {
const { record } = ((window as unknown) as IWindow).rrweb;
const { record } = (window as unknown as IWindow).rrweb;
record({
inlineStylesheet: true,
emit: ((window as unknown) as IWindow).emit,
emit: (window as unknown as IWindow).emit,
});
const link1 = document.createElement('link');
@@ -708,11 +709,11 @@ describe('record', function (this: ISuite) {
iframe.setAttribute('src', `/html/hello-world.html?2`);
document.body.appendChild(iframe);
const { record } = ((window as unknown) as IWindow).rrweb;
const { record } = (window as unknown as IWindow).rrweb;
record({
inlineStylesheet: true,
emit: ((window as unknown) as IWindow).emit,
emit: (window as unknown as IWindow).emit,
});
});
@@ -743,11 +744,11 @@ describe('record', function (this: ISuite) {
// do not `await` the following function, otherwise `waitForResponse` _might_ not be called
void ctx.page.evaluate((corsStylesheetURL) => {
const { record } = ((window as unknown) as IWindow).rrweb;
const { record } = (window as unknown as IWindow).rrweb;
record({
inlineStylesheet: true,
emit: ((window as unknown) as IWindow).emit,
emit: (window as unknown as IWindow).emit,
});
const link1 = document.createElement('link');
@@ -793,8 +794,9 @@ describe('record', function (this: ISuite) {
// Add stylesheet to an IFrame document.
const iframe = document.querySelector('iframe');
const sheet3 = new (iframe!.contentWindow! as IWindow &
typeof globalThis).CSSStyleSheet();
const sheet3 = new (
iframe!.contentWindow! as IWindow & typeof globalThis
).CSSStyleSheet();
sheet3.replaceSync!('h1 { color: blue; }');
iframe!.contentDocument!.adoptedStyleSheets = [sheet3];
@@ -803,8 +805,8 @@ describe('record', function (this: ISuite) {
ele.innerText = 'h1 in iframe';
iframe!.contentDocument!.body.appendChild(ele);
((window as unknown) as IWindow).rrweb.record({
emit: ((window.top as unknown) as IWindow).emit,
(window as unknown as IWindow).rrweb.record({
emit: (window.top as unknown as IWindow).emit,
});
// Make incremental changes to shadow dom.
@@ -819,8 +821,9 @@ describe('record', function (this: ISuite) {
document.adoptedStyleSheets = [sheet4, sheet, sheet2];
const sheet5 = new (iframe!.contentWindow! as IWindow &
typeof globalThis).CSSStyleSheet();
const sheet5 = new (
iframe!.contentWindow! as IWindow & typeof globalThis
).CSSStyleSheet();
sheet5.replaceSync!('h2 { color: purple; }');
iframe!.contentDocument!.adoptedStyleSheets = [sheet5, sheet3];
}, 10);
@@ -853,9 +856,9 @@ describe('record iframes', function (this: ISuite) {
it('captures iframe content in correct order', async () => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
const { record } = (window as unknown as IWindow).rrweb;
record({
emit: ((window as unknown) as IWindow).emit,
emit: (window as unknown as IWindow).emit,
});
});
await waitForRAF(ctx.page);
@@ -877,10 +880,10 @@ describe('record iframes', function (this: ISuite) {
it('captures stylesheet mutations in iframes', async () => {
await ctx.page.evaluate(() => {
const { record } = ((window as unknown) as IWindow).rrweb;
const { record } = (window as unknown as IWindow).rrweb;
record({
// need to reference window.top for when we are in an iframe!
emit: ((window.top as unknown) as IWindow).emit,
emit: (window.top as unknown as IWindow).emit,
});
const iframe = document.querySelector('iframe');

48
packages/rrweb/test/record/cross-origin-iframes.test.ts
View File

@@ -51,14 +51,14 @@ async function injectRecordScript(
});
options = options || {};
await frame.evaluate((options) => {
((window as unknown) as IWindow).snapshots = [];
const { record, pack } = ((window as unknown) as IWindow).rrweb;
(window as unknown as IWindow).snapshots = [];
const { record, pack } = (window as unknown as IWindow).rrweb;
const config: recordOptions<eventWithTime> = {
recordCrossOriginIframes: true,
recordCanvas: true,
emit(event) {
((window as unknown) as IWindow).snapshots.push(event);
((window as unknown) as IWindow).emit(event);
(window as unknown as IWindow).snapshots.push(event);
(window as unknown as IWindow).emit(event);
},
};
if (options.usePackFn) {
@@ -148,21 +148,21 @@ describe('cross origin iframes', function (this: ISuite) {
const frame = await el.contentFrame();
const events = await frame?.evaluate(
() => ((window as unknown) as IWindow).snapshots,
() => (window as unknown as IWindow).snapshots,
);
expect(events).toMatchObject([]);
});
it('will emit events if it is in the top level iframe', async () => {
const events = await ctx.page.evaluate(
() => ((window as unknown) as IWindow).snapshots,
() => (window as unknown as IWindow).snapshots,
);
expect(events.length).not.toBe(0);
});
it('should emit contents of iframe', async () => {
const events = await ctx.page.evaluate(
() => ((window as unknown) as IWindow).snapshots,
() => (window as unknown as IWindow).snapshots,
);
await waitForRAF(ctx.page);
// two events (full snapshot + meta) from main frame, and one full snapshot from iframe
@@ -171,7 +171,7 @@ describe('cross origin iframes', function (this: ISuite) {
it('should emit full snapshot event from iframe as mutation event', async () => {
const events = await ctx.page.evaluate(
() => ((window as unknown) as IWindow).snapshots,
() => (window as unknown as IWindow).snapshots,
);
await waitForRAF(ctx.page);
// two events from main frame, and two from iframe
@@ -193,7 +193,7 @@ describe('cross origin iframes', function (this: ISuite) {
it('should use unique id for child of iframes', async () => {
const events: eventWithTime[] = await ctx.page.evaluate(
() => ((window as unknown) as IWindow).snapshots,
() => (window as unknown as IWindow).snapshots,
);
await waitForRAF(ctx.page);
expect(
@@ -211,7 +211,7 @@ describe('cross origin iframes', function (this: ISuite) {
await injectRecordScript(ctx.page.mainFrame().childFrames()[0]); // injects script into new iframe
const events: eventWithTime[] = await ctx.page.evaluate(
() => ((window as unknown) as IWindow).snapshots,
() => (window as unknown as IWindow).snapshots,
);
expect(
(events[events.length - 1].data as mutationData).removes,
@@ -343,7 +343,7 @@ describe('cross origin iframes', function (this: ISuite) {
it('should record custom events', async () => {
const frame = ctx.page.mainFrame().childFrames()[0];
await frame.evaluate(() => {
((window as unknown) as IWindow).rrweb.addCustomEvent('test', {
(window as unknown as IWindow).rrweb.addCustomEvent('test', {
id: 1,
parentId: 1,
nextId: 2,
@@ -388,18 +388,17 @@ describe('cross origin iframes', function (this: ISuite) {
});
await waitForRAF(ctx.page);
await ctx.page.evaluate(() => {
(document.adoptedStyleSheets![0]
.cssRules[0] as CSSStyleRule).style.setProperty('color', 'green');
(document.adoptedStyleSheets![0]
.cssRules[0] as CSSStyleRule).style.removeProperty('display');
(
document.adoptedStyleSheets![0].cssRules[0] as CSSStyleRule
).style.setProperty('color', 'green');
(
document.adoptedStyleSheets![0].cssRules[0] as CSSStyleRule
).style.removeProperty('display');
});
await frame.evaluate(() => {
(document.adoptedStyleSheets![0]
.cssRules[0] as CSSStyleRule).style.setProperty(
'font-size',
'medium',
'important',
);
(
document.adoptedStyleSheets![0].cssRules[0] as CSSStyleRule
).style.setProperty('font-size', 'medium', 'important');
document.adoptedStyleSheets![0].insertRule('h2 { color: red; }');
});
await waitForRAF(ctx.page);
@@ -445,8 +444,9 @@ describe('cross origin iframes', function (this: ISuite) {
'color',
'green',
);
(document.styleSheets[0]
.cssRules[0] as CSSStyleRule).style.removeProperty('display');
(
document.styleSheets[0].cssRules[0] as CSSStyleRule
).style.removeProperty('display');
});
await frame.evaluate(() => {
(document.styleSheets[0].cssRules[0] as CSSStyleRule).style.setProperty(
@@ -596,7 +596,7 @@ describe('same origin iframes', function (this: ISuite) {
it('should emit contents of iframe once', async () => {
const events = await ctx.page.evaluate(
() => ((window as unknown) as IWindow).snapshots,
() => (window as unknown as IWindow).snapshots,
);
await waitForRAF(ctx.page);
// two events (full snapshot + meta) from main frame,

4
packages/rrweb/test/record/webgl.test.ts
View File

@@ -64,13 +64,13 @@ const setup = function (
ctx.page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
await ctx.page.evaluate((canvasSample) => {
const { record } = ((window as unknown) as IWindow).rrweb;
const { record } = (window as unknown as IWindow).rrweb;
record({
recordCanvas: true,
sampling: {
canvas: canvasSample,
},
emit: ((window as unknown) as IWindow).emit,
emit: (window as unknown as IWindow).emit,
});
}, canvasSample);
});

4
packages/rrweb/test/replay/webgl-mutation.test.ts
View File

@@ -22,9 +22,9 @@ describe('webglMutation', () => {
const createShaderMock = jest.fn().mockImplementation(() => {
return new WebGLShader();
});
const context = ({
const context = {
createShader: createShaderMock,
} as unknown) as WebGLRenderingContext;
} as unknown as WebGLRenderingContext;
jest.spyOn(canvas, 'getContext').mockImplementation(() => {
return context;
});

4
packages/rrweb/test/replayer.test.ts
View File

@@ -597,7 +597,9 @@ describe('replayer', function () {
expect(
await iframeTwoDocument!.evaluate(
(iframe) => (iframe as HTMLIFrameElement)!.contentDocument!.doctype,
(await iframeTwoDocument!.$$('iframe'))[1],
(
await iframeTwoDocument!.$$('iframe')
)[1],
),
).not.toBeNull();
});

13
packages/rrweb/test/utils.ts
View File

@@ -17,7 +17,7 @@ import * as url from 'url';
import * as fs from 'fs';
export async function launchPuppeteer(
options?: Parameters<typeof puppeteer['launch']>[0],
options?: Parameters<(typeof puppeteer)['launch']>[0],
) {
return await puppeteer.launch({
headless: process.env.PUPPETEER_HEADLESS ? true : false,
@@ -119,7 +119,8 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
s.data.href = 'about:blank';
}
// FIXME: travis coordinates seems different with my laptop
const coordinatesReg = /(bottom|top|left|right|width|height): \d+(\.\d+)?px/g;
const coordinatesReg =
/(bottom|top|left|right|width|height): \d+(\.\d+)?px/g;
if (
s.type === EventType.IncrementalSnapshot &&
s.data.source === IncrementalSource.MouseInteraction
@@ -178,10 +179,8 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
add.node.attributes.rr_dataURL &&
typeof add.node.attributes.rr_dataURL === 'string'
) {
add.node.attributes.rr_dataURL = add.node.attributes.rr_dataURL.replace(
/,.+$/,
',...',
);
add.node.attributes.rr_dataURL =
add.node.attributes.rr_dataURL.replace(/,.+$/, ',...');
}
}
});
@@ -284,7 +283,7 @@ export function stripBase64(events: eventWithTime[]) {
const base64Strings: string[] = [];
function walk<T>(obj: T): T {
if (!obj || typeof obj !== 'object') return obj;
if (Array.isArray(obj)) return (obj.map((e) => walk(e)) as unknown) as T;
if (Array.isArray(obj)) return obj.map((e) => walk(e)) as unknown as T;
const newObj: Partial<T> = {};
for (const prop in obj) {
const value = obj[prop];

934
yarn.lock
View File

File diff suppressed because it is too large Load Diff