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

feat: add support for recording and replaying adoptedStyleSheets API (#989)

Browse Source 
* test(recording side): add test case for adopted stylesheets in shadow doms and iframe

* add type definition for adopted StyleSheets

* create a StyleSheet Mirror

* enable to record the outermost document's adoptedStyleSheet

* enable to serialize all stylesheets in documents (iframe) and shadow roots

* enable to record adopted stylesheets while building full snapshot

* test: add test case for mutations on adoptedStyleSheets

* defer to record adoptedStyleSheets to avoid create events before full snapshot

* feat: enable to track the mutation of AdoptedStyleSheets

* Merge branch 'fix-shadowdom-record' into construct-style

* fix: incorrect id conditional judgement

* test: add a test case for replaying side

* tweak the style mirror for replayer

* feat: enable to replay adoptedStyleSheet events

* fix: rule index wasn't recorded when serializing the adoptedStyleSheets

* add test case for mutation of stylesheet objects and add support for replace & replaceSync

* refactor: improve the code quality

* feat: monkey patch adoptedStyleSheet API to track its modification

* feat: add support for checkouting fullsnapshot

* CI: fix failed type checks

* test: add test case for nested shadow doms and iframe elements

* feat: add support for adoptedStyleSheets in VirtualDom mode

* style: format files

* test: improve the robustness of the test case

* CI: fix an eslint error

* test: improve the robustness of the test case

* fix: adoptedStyleSheets not applied in fast-forward mode (virtual dom optimization not used)

* refactor the data structure of adoptedStyleSheet event to make it more efficient and robust

* improve the robustness in the live mode

In the live mode where events are transferred over network without strict order guarantee, some newer events are applied before some old events and adopted stylesheets may haven't been created.
Added a retry mechanism to solve this problem.

* apply Yanzhen's review suggestion

* update action name

* test: make the test case more robust for travis CI

* Update packages/rrweb/src/record/constructableStyleSheets.d.ts

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

* Update packages/rrweb/src/record/constructableStyleSheets.d.ts

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

* apply Justin's review suggestions

add more browser compatibility checks

* add eslint-plugin-compat and config

* fix record test  type errors

* make Mirror's replace function act the same with the original one when there's no existed node to replace

* test: increase the robustness of test cases

* remove eslint disable in favor of feature detection

Early returns aren't supported yet unfortunately, otherwise this code would be cleaner https://github.com/amilajack/eslint-plugin-compat/issues/523

* Remove eslint-disable-next-line compat/compat

* Standardize browserslist and remove lint exceptions (#1010)

* test: revert deleting virtual style tests and rewrite them to fit the current code base

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
This commit is contained in:
Yun Feng
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 65ff0efefd
commit 4e241acc6d
35 changed files with 3278 additions and 444 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,8 @@ import type {
canvasEventWithTime,
inputData,
scrollData,
styleDeclarationData,
styleSheetRuleData,
} from 'rrweb/src/types';
import type {
IRRCDATASection,
@@ -79,6 +81,10 @@ export type ReplayerHandler = {
) => void;
applyInput: (data: inputData) => void;
applyScroll: (data: scrollData, isSync: boolean) => void;
applyStyleSheetMutation: (
data: styleDeclarationData | styleSheetRuleData,
styleSheet: CSSStyleSheet,
) => void;
};
export function diff(
@@ -161,20 +167,25 @@ export function diff(
}
break;
case 'STYLE':
applyVirtualStyleRulesToNode(
oldElement as HTMLStyleElement,
(newTree as RRStyleElement).rules,
);
{
const styleSheet = (oldElement as HTMLStyleElement).sheet;
styleSheet &&
(newTree as RRStyleElement).rules.forEach((data) =>
replayer.applyStyleSheetMutation(data, styleSheet),
);
}
break;
}
if (newRRElement.shadowRoot) {
if (!oldElement.shadowRoot) oldElement.attachShadow({ mode: 'open' });
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const oldChildren = oldElement.shadowRoot!.childNodes;
const newChildren = newRRElement.shadowRoot.childNodes;
if (oldChildren.length > 0 || newChildren.length > 0)
diffChildren(
Array.from(oldChildren),
newChildren,
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
oldElement.shadowRoot!,
replayer,
rrnodeMirror,
@@ -335,6 +346,7 @@ function diffChildren(
}
indexInOld = oldIdToIndex[rrnodeMirror.getId(newStartNode)];
if (indexInOld) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const nodeToMove = oldChildren[indexInOld]!;
parentNode.insertBefore(nodeToMove, oldStartNode);
diff(nodeToMove, newStartNode, replayer, rrnodeMirror);
@@ -439,110 +451,3 @@ export function createOrGetNode(
if (sn) domMirror.add(node, { ...sn });
return node;
}
export function getNestedRule(
rules: CSSRuleList,
position: number[],
): CSSGroupingRule {
const rule = rules[position[0]] as CSSGroupingRule;
if (position.length === 1) {
return rule;
} else {
return getNestedRule(
(rule.cssRules[position[1]] as CSSGroupingRule).cssRules,
position.slice(2),
);
}
}
export enum StyleRuleType {
Insert,
Remove,
Snapshot,
SetProperty,
RemoveProperty,
}
type InsertRule = {
cssText: string;
type: StyleRuleType.Insert;
index?: number | number[];
};
type RemoveRule = {
type: StyleRuleType.Remove;
index: number | number[];
};
type SetPropertyRule = {
type: StyleRuleType.SetProperty;
index: number[];
property: string;
value: string | null;
priority: string | undefined;
};
type RemovePropertyRule = {
type: StyleRuleType.RemoveProperty;
index: number[];
property: string;
};
export type VirtualStyleRules = Array<
InsertRule | RemoveRule | SetPropertyRule | RemovePropertyRule
>;
export function getPositionsAndIndex(nestedIndex: number[]) {
const positions = [...nestedIndex];
const index = positions.pop();
return { positions, index };
}
export function applyVirtualStyleRulesToNode(
styleNode: HTMLStyleElement,
virtualStyleRules: VirtualStyleRules,
) {
const sheet = styleNode.sheet!;
virtualStyleRules.forEach((rule) => {
if (rule.type === StyleRuleType.Insert) {
try {
if (Array.isArray(rule.index)) {
const { positions, index } = getPositionsAndIndex(rule.index);
const nestedRule = getNestedRule(sheet.cssRules, positions);
nestedRule.insertRule(rule.cssText, index);
} else {
sheet.insertRule(rule.cssText, rule.index);
}
} catch (e) {
/**
* sometimes we may capture rules with browser prefix
* insert rule with prefixs in other browsers may cause Error
*/
}
} else if (rule.type === StyleRuleType.Remove) {
try {
if (Array.isArray(rule.index)) {
const { positions, index } = getPositionsAndIndex(rule.index);
const nestedRule = getNestedRule(sheet.cssRules, positions);
nestedRule.deleteRule(index || 0);
} else {
sheet.deleteRule(rule.index);
}
} catch (e) {
/**
* accessing styleSheet rules may cause SecurityError
* for specific access control settings
*/
}
} else if (rule.type === StyleRuleType.SetProperty) {
const nativeRule = (getNestedRule(
sheet.cssRules,
rule.index,
) as unknown) as CSSStyleRule;
nativeRule.style.setProperty(rule.property, rule.value, rule.priority);
} else if (rule.type === StyleRuleType.RemoveProperty) {
const nativeRule = (getNestedRule(
sheet.cssRules,
rule.index,
) as unknown) as CSSStyleRule;
nativeRule.style.removeProperty(rule.property);
}
});
}

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

@@ -12,8 +12,9 @@ import type {
canvasEventWithTime,
inputData,
scrollData,
styleSheetRuleData,
styleDeclarationData,
} from 'rrweb/src/types';
import type { VirtualStyleRules } from './diff';
import {
BaseRRNode as RRNode,
BaseRRCDATASectionImpl,
@@ -164,7 +165,7 @@ export class RRCanvasElement extends RRElement implements IRRElement {
}
export class RRStyleElement extends RRElement {
public rules: VirtualStyleRules = [];
public rules: (styleSheetRuleData | styleDeclarationData)[] = [];
}
export class RRIFrameElement extends RRElement {
@@ -312,7 +313,8 @@ export function buildFromDom(
}
if (node.nodeName === 'IFRAME') {
walk((node as HTMLIFrameElement).contentDocument!, rrNode);
const iframeDoc = (node as HTMLIFrameElement).contentDocument;
iframeDoc && walk(iframeDoc, rrNode);
} else if (
node.nodeType === NodeType.DOCUMENT_NODE ||
node.nodeType === NodeType.ELEMENT_NODE ||
@@ -323,6 +325,7 @@ export function buildFromDom(
node.nodeType === NodeType.ELEMENT_NODE &&
(node as HTMLElement).shadowRoot
)
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
walk((node as HTMLElement).shadowRoot!, rrNode);
node.childNodes.forEach((childNode) => walk(childNode, rrNode));
}
@@ -475,11 +478,5 @@ function walk(node: IRRNode, mirror: IMirror<IRRNode>, blankSpace: string) {
export { RRNode };
export {
diff,
createOrGetNode,
StyleRuleType,
ReplayerHandler,
VirtualStyleRules,
} from './diff';
export { diff, createOrGetNode, ReplayerHandler } from './diff';
export * from './document';

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

@@ -2,14 +2,7 @@
* @jest-environment jsdom
*/
import { getDefaultSN, RRDocument, RRMediaElement } from '../src';
import {
applyVirtualStyleRulesToNode,
createOrGetNode,
diff,
ReplayerHandler,
StyleRuleType,
VirtualStyleRules,
} from '../src/diff';
import { createOrGetNode, diff, ReplayerHandler } from '../src/diff';
import {
NodeType as RRNodeType,
serializedNodeWithId,
@@ -17,11 +10,14 @@ import {
Mirror,
} from 'rrweb-snapshot';
import type { IRRNode } from '../src/document';
import {
import { Replayer } from 'rrweb';
import type {
canvasMutationData,
EventType,
IncrementalSource,
styleDeclarationData,
styleSheetRuleData,
} from 'rrweb/src/types';
import { EventType, IncrementalSource } from 'rrweb/src/types';
import type { eventWithTime } from 'rrweb/typings/types';
const elementSn = {
type: RRNodeType.Element,
@@ -101,6 +97,7 @@ describe('diff algorithm for rrdom', () => {
applyCanvas: () => {},
applyInput: () => {},
applyScroll: () => {},
applyStyleSheetMutation: () => {},
};
});
@@ -162,12 +159,23 @@ describe('diff algorithm for rrdom', () => {
document.documentElement.appendChild(element);
const rrDocument = new RRDocument();
const rrStyle = rrDocument.createElement('style');
rrStyle.rules = [
{ cssText: 'div{color: black;}', type: StyleRuleType.Insert, index: 0 },
];
const styleData: styleSheetRuleData = {
source: IncrementalSource.StyleSheetRule,
adds: [
{
rule: 'div{color: black;}',
index: 0,
},
],
};
rrStyle.rules = [styleData];
replayer.applyStyleSheetMutation = jest.fn();
diff(element, rrStyle, replayer);
expect(element.sheet!.cssRules.length).toEqual(1);
expect(element.sheet!.cssRules[0].cssText).toEqual('div {color: black;}');
expect(replayer.applyStyleSheetMutation).toHaveBeenCalledTimes(1);
expect(replayer.applyStyleSheetMutation).toHaveBeenCalledWith(
styleData,
element.sheet,
);
});
it('should diff a canvas element', () => {
@@ -1267,16 +1275,50 @@ describe('diff algorithm for rrdom', () => {
});
describe('apply virtual style rules to node', () => {
beforeEach(() => {
const dummyReplayer = new Replayer(([
{
type: EventType.DomContentLoaded,
timestamp: 0,
},
{
type: EventType.Meta,
data: {
with: 1920,
height: 1080,
},
timestamp: 0,
},
] as unknown) as eventWithTime[]);
replayer.applyStyleSheetMutation = (
data: styleDeclarationData | styleSheetRuleData,
styleSheet: CSSStyleSheet,
) => {
if (data.source === IncrementalSource.StyleSheetRule)
// Disable the ts check here because these two functions are private methods.
// @ts-ignore
dummyReplayer.applyStyleSheetRule(data, styleSheet);
else if (data.source === IncrementalSource.StyleDeclaration)
// @ts-ignore
dummyReplayer.applyStyleDeclaration(data, styleSheet);
};
});
it('should insert rule at index 0 in empty sheet', () => {
document.write('<style></style>');
const styleEl = document.getElementsByTagName('style')[0];
const cssText = '.added-rule {border: 1px solid yellow;}';
const virtualStyleRules: VirtualStyleRules = [
{ cssText, index: 0, type: StyleRuleType.Insert },
];
applyVirtualStyleRulesToNode(styleEl, virtualStyleRules);
const styleRuleData: styleSheetRuleData = {
source: IncrementalSource.StyleSheetRule,
adds: [
{
rule: cssText,
index: 0,
},
],
};
replayer.applyStyleSheetMutation(styleRuleData, styleEl.sheet!);
expect(styleEl.sheet?.cssRules?.length).toEqual(1);
expect(styleEl.sheet?.cssRules[0].cssText).toEqual(cssText);
@@ -1292,10 +1334,16 @@ describe('diff algorithm for rrdom', () => {
const styleEl = document.getElementsByTagName('style')[0];
const cssText = '.added-rule {border: 1px solid yellow;}';
const virtualStyleRules: VirtualStyleRules = [
{ cssText, index: 0, type: StyleRuleType.Insert },
];
applyVirtualStyleRulesToNode(styleEl, virtualStyleRules);
const styleRuleData: styleSheetRuleData = {
source: IncrementalSource.StyleSheetRule,
adds: [
{
rule: cssText,
index: 0,
},
],
};
replayer.applyStyleSheetMutation(styleRuleData, styleEl.sheet!);
expect(styleEl.sheet?.cssRules?.length).toEqual(3);
expect(styleEl.sheet?.cssRules[0].cssText).toEqual(cssText);
@@ -1310,10 +1358,15 @@ describe('diff algorithm for rrdom', () => {
`);
const styleEl = document.getElementsByTagName('style')[0];
const virtualStyleRules: VirtualStyleRules = [
{ index: 0, type: StyleRuleType.Remove },
];
applyVirtualStyleRulesToNode(styleEl, virtualStyleRules);
const styleRuleData: styleSheetRuleData = {
source: IncrementalSource.StyleSheetRule,
removes: [
{
index: 0,
},
],
};
replayer.applyStyleSheetMutation(styleRuleData, styleEl.sheet!);
expect(styleEl.sheet?.cssRules?.length).toEqual(1);
expect(styleEl.sheet?.cssRules[0].cssText).toEqual('div {color: black;}');
@@ -1331,10 +1384,16 @@ describe('diff algorithm for rrdom', () => {
const styleEl = document.getElementsByTagName('style')[0];
const cssText = '.added-rule {border: 1px solid yellow;}';
const virtualStyleRules: VirtualStyleRules = [
{ cssText, index: [0, 0], type: StyleRuleType.Insert },
];
applyVirtualStyleRulesToNode(styleEl, virtualStyleRules);
const styleRuleData: styleSheetRuleData = {
source: IncrementalSource.StyleSheetRule,
adds: [
{
rule: cssText,
index: [0, 0],
},
],
};
replayer.applyStyleSheetMutation(styleRuleData, styleEl.sheet!);
expect(
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length,
@@ -1354,11 +1413,15 @@ describe('diff algorithm for rrdom', () => {
</style>
`);
const styleEl = document.getElementsByTagName('style')[0];
const virtualStyleRules: VirtualStyleRules = [
{ index: [0, 1], type: StyleRuleType.Remove },
];
applyVirtualStyleRulesToNode(styleEl, virtualStyleRules);
const styleRuleData: styleSheetRuleData = {
source: IncrementalSource.StyleSheetRule,
removes: [
{
index: [0, 1],
},
],
};
replayer.applyStyleSheetMutation(styleRuleData, styleEl.sheet!);
expect(
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length,

6
packages/rrdom/tsconfig.json
View File

@@ -22,5 +22,9 @@
],
"compileOnSave": true,
"exclude": ["test"],
"include": ["src", "../rrweb/src/record/workers/workers.d.ts"]
"include": [
"src",
"../rrweb/src/record/workers/workers.d.ts",
"../rrweb/src/record/constructable-stylesheets.d.ts"
]
}