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

Fix the regexp performance issue

Browse Source 
Also move the addHoverClass implementation into the rebuild stage.
So if there is still some corner case we have not handled, it will
only affect the replayer part of rrweb.
This commit is contained in:
Yanzhen Yu
2026-04-01 12:00:00 +08:00
parent de8dc60b5e
commit 2065e00c5d
6 changed files with 70 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
test/integration.ts
View File

@@ -70,6 +70,7 @@ describe('integration tests', () => {
before(async () => {
this.server = await server();
this.browser = await puppeteer.launch({
executablePath: '/home/yanzhen/Desktop/chrome-linux/chrome',
// headless: false,
});

43
test/rebuild.test.ts Normal file
View File

@@ -0,0 +1,43 @@
import 'mocha';
import { expect } from 'chai';
import { addHoverClass } from '../src/rebuild';
describe('add hover class to hover selector related rules', () => {
it('will do nothing to css text without :hover', () => {
const cssText = 'body { color: white }';
expect(addHoverClass(cssText)).to.equal(cssText);
});
it('can add hover class to css text', () => {
const cssText = '.a:hover { color: white }';
expect(addHoverClass(cssText)).to.equal(
'.a:hover, .a.\\:hover { color: white }',
);
});
it('can add hover class when there is multi selector', () => {
const cssText = '.a, .b:hover, .c { color: white }';
expect(addHoverClass(cssText)).to.equal(
'.a, .b:hover, .b.\\:hover, .c { color: white }',
);
});
it('can add hover class when :hover is not the end of selector', () => {
const cssText = 'div:hover::after { color: white }';
expect(addHoverClass(cssText)).to.equal(
'div:hover::after, div.\\:hover::after { color: white }',
);
});
it('can add hover class when the selector has multi :hover', () => {
const cssText = 'a:hover b:hover { color: white }';
expect(addHoverClass(cssText)).to.equal(
'a:hover b:hover, a.\\:hover b.\\:hover { color: white }',
);
});
it('will ignore :hover in css value', () => {
const cssText = '.a::after { content: ":hover" }';
expect(addHoverClass(cssText)).to.equal(cssText);
});
});

42
test/snapshot.test.ts
View File

@@ -1,6 +1,6 @@
import 'mocha';
import { expect } from 'chai';
import { absoluteToStylesheet, addHoverClass } from '../src/snapshot';
import { absoluteToStylesheet } from '../src/snapshot';
describe('absolute url to stylesheet', () => {
const href = 'http://localhost/css/style.css';
@@ -29,43 +29,3 @@ describe('absolute url to stylesheet', () => {
).to.equal(`url('http://localhost/a.jpg')`);
});
});
describe('add hover class to hover selector related rules', () => {
it('will do nothing to css text without :hover', () => {
const cssText = 'body { color: white }';
expect(addHoverClass(cssText)).to.equal(cssText);
});
it('can add hover class to css text', () => {
const cssText = '.a:hover { color: white }';
expect(addHoverClass(cssText)).to.equal(
'.a:hover, .a.\\:hover { color: white }',
);
});
it('can add hover class when there is multi selector', () => {
const cssText = '.a, .b:hover, .c { color: white }';
expect(addHoverClass(cssText)).to.equal(
'.a, .b:hover, .b.\\:hover, .c { color: white }',
);
});
it('can add hover class when :hover is not the end of selector', () => {
const cssText = 'div:hover::after { color: white }';
expect(addHoverClass(cssText)).to.equal(
'div:hover::after, div.\\:hover::after { color: white }',
);
});
it('can add hover class when the selector has multi :hover', () => {
const cssText = 'a:hover b:hover { color: white }';
expect(addHoverClass(cssText)).to.equal(
'a:hover b:hover, a.\\:hover b.\\:hover { color: white }',
);
});
it('will ignore :hover in css value', () => {
const cssText = '.a::after { content: ":hover" }';
expect(addHoverClass(cssText)).to.equal(cssText);
});
});