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

refactor nested style code (#667)

Browse Source
This commit is contained in:
Justin Halsall
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 15e80075f1
commit 0ec083e875
4 changed files with 40 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -58,6 +58,7 @@ import {
VirtualStyleRules,
VirtualStyleRulesMap,
getNestedRule,
getPositionsAndIndex,
} from './virtual-styles';
const SKIP_TIME_THRESHOLD = 10 * 1000;
@@ -976,23 +977,24 @@ export class Replayer {
}
if (d.adds) {
d.adds.forEach(({ rule, index }) => {
d.adds.forEach(({ rule, index: nestedIndex }) => {
if (styleSheet) {
try {
if (Array.isArray(index)) {
const positions = [...index];
const insertAt = positions.pop();
if (Array.isArray(nestedIndex)) {
const { positions, index } = getPositionsAndIndex(
nestedIndex,
);
const nestedRule = getNestedRule(
styleSheet.cssRules,
positions,
);
nestedRule.insertRule(rule, insertAt);
nestedRule.insertRule(rule, index);
} else {
const _index =
index === undefined
? undefined
: Math.min(index, styleSheet.cssRules.length);
styleSheet.insertRule(rule, _index);
const index =
nestedIndex === undefined
? undefined
: Math.min(nestedIndex, styleSheet.cssRules.length);
styleSheet.insertRule(rule, index);
}
} catch (e) {
/**
@@ -1005,27 +1007,32 @@ export class Replayer {
*/
}
} else {
rules?.push({ cssText: rule, index, type: StyleRuleType.Insert });
rules?.push({
cssText: rule,
index: nestedIndex,
type: StyleRuleType.Insert,
});
}
});
}
if (d.removes) {
d.removes.forEach(({ index }) => {
d.removes.forEach(({ index: nestedIndex }) => {
if (usingVirtualParent) {
rules?.push({ index, type: StyleRuleType.Remove });
rules?.push({ index: nestedIndex, type: StyleRuleType.Remove });
} else {
try {
if (Array.isArray(index)) {
const positions = [...index];
const deleteAt = positions.pop();
if (Array.isArray(nestedIndex)) {
const { positions, index } = getPositionsAndIndex(
nestedIndex,
);
const nestedRule = getNestedRule(
styleSheet!.cssRules,
positions,
);
nestedRule.deleteRule(deleteAt || 0);
nestedRule.deleteRule(index || 0);
} else {
styleSheet?.deleteRule(index);
styleSheet?.deleteRule(nestedIndex);
}
} catch (e) {
/**

16
packages/rrweb/src/replay/virtual-styles.ts
View File

@@ -39,6 +39,12 @@ export function getNestedRule(
}
}
export function getPositionsAndIndex(nestedIndex: number[]) {
const positions = [...nestedIndex];
const index = positions.pop();
return { positions, index };
}
export function applyVirtualStyleRulesToNode(
storedRules: VirtualStyleRules,
styleNode: HTMLStyleElement,
@@ -47,13 +53,12 @@ export function applyVirtualStyleRulesToNode(
if (rule.type === StyleRuleType.Insert) {
try {
if (Array.isArray(rule.index)) {
const positions = [...rule.index];
const insertAt = positions.pop();
const { positions, index } = getPositionsAndIndex(rule.index);
const nestedRule = getNestedRule(
styleNode.sheet!.cssRules,
positions,
);
nestedRule.insertRule(rule.cssText, insertAt);
nestedRule.insertRule(rule.cssText, index);
} else {
styleNode.sheet?.insertRule(rule.cssText, rule.index);
}
@@ -66,13 +71,12 @@ export function applyVirtualStyleRulesToNode(
} else if (rule.type === StyleRuleType.Remove) {
try {
if (Array.isArray(rule.index)) {
const positions = [...rule.index];
const deleteAt = positions.pop();
const { positions, index } = getPositionsAndIndex(rule.index);
const nestedRule = getNestedRule(
styleNode.sheet!.cssRules,
positions,
);
nestedRule.deleteRule(deleteAt || 0);
nestedRule.deleteRule(index || 0);
} else {
styleNode.sheet?.deleteRule(rule.index);
}

5
packages/rrweb/typings/replay/virtual-styles.d.ts vendored
View File

@@ -7,11 +7,11 @@ export declare enum StyleRuleType {
declare type InsertRule = {
cssText: string;
type: StyleRuleType.Insert;
index?: number;
index?: number | number[];
};
declare type RemoveRule = {
type: StyleRuleType.Remove;
index: number;
index: number | number[];
};
declare type SnapshotRule = {
type: StyleRuleType.Snapshot;
@@ -19,6 +19,7 @@ declare type SnapshotRule = {
};
export declare type VirtualStyleRules = Array<InsertRule | RemoveRule | SnapshotRule>;
export declare type VirtualStyleRulesMap = Map<INode, VirtualStyleRules>;
export declare function getNestedRule(rules: CSSRuleList, position: number[]): CSSGroupingRule;
export declare function applyVirtualStyleRulesToNode(storedRules: VirtualStyleRules, styleNode: HTMLStyleElement): void;
export declare function storeCSSRules(parentElement: HTMLStyleElement, virtualStyleRulesMap: VirtualStyleRulesMap): void;
export {};

4
packages/rrweb/typings/types.d.ts vendored
View File

@@ -282,10 +282,10 @@ export declare type scrollPosition = {
export declare type scrollCallback = (p: scrollPosition) => void;
export declare type styleSheetAddRule = {
rule: string;
index?: number;
index?: number | number[];
};
export declare type styleSheetDeleteRule = {
index: number;
index: number | number[];
};
export declare type styleSheetRuleParam = {
id: number;