From 6f109f49772c8b118b03a88ad0bcbffa66aef3cf Mon Sep 17 00:00:00 2001 From: Justin Halsall Date: Sun, 15 Aug 2021 10:34:28 +0200 Subject: [PATCH] refactor nested style code --- packages/rrweb/src/replay/index.ts | 43 +++++++++++-------- packages/rrweb/src/replay/virtual-styles.ts | 16 ++++--- .../rrweb/typings/replay/virtual-styles.d.ts | 5 ++- packages/rrweb/typings/types.d.ts | 4 +- 4 files changed, 40 insertions(+), 28 deletions(-) diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts index 6d822569b6..0556abae4a 100644 --- a/packages/rrweb/src/replay/index.ts +++ b/packages/rrweb/src/replay/index.ts @@ -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) { /** diff --git a/packages/rrweb/src/replay/virtual-styles.ts b/packages/rrweb/src/replay/virtual-styles.ts index e9086eedd6..a878bfc4ef 100644 --- a/packages/rrweb/src/replay/virtual-styles.ts +++ b/packages/rrweb/src/replay/virtual-styles.ts @@ -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); } diff --git a/packages/rrweb/typings/replay/virtual-styles.d.ts b/packages/rrweb/typings/replay/virtual-styles.d.ts index 107e07855a..b219f8b946 100644 --- a/packages/rrweb/typings/replay/virtual-styles.d.ts +++ b/packages/rrweb/typings/replay/virtual-styles.d.ts @@ -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; export declare type VirtualStyleRulesMap = Map; +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 {}; diff --git a/packages/rrweb/typings/types.d.ts b/packages/rrweb/typings/types.d.ts index 73654ec505..22aa1020ab 100644 --- a/packages/rrweb/typings/types.d.ts +++ b/packages/rrweb/typings/types.d.ts @@ -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;