From eb1fb6d60f4381ee87272bdceccdf6ad5297284f Mon Sep 17 00:00:00 2001 From: Shay Malchi Date: Wed, 6 Nov 2024 10:12:29 +0200 Subject: [PATCH] Merge upstream from remote rrweb (#26) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Skip mask check on leaf elements (#1512) * Minor fixup for #1349; the 'we can avoid the check on leaf elements' optimisation wasn't being applied as `n.childNodes` was always truthy even when there were no childNodes. Changing it to `n.childNodes.length` directly there (see #1402) actually caused a bug as during a mutation, we serialize the text node directly, and need to jump to the parentElement to do the check. This is why I've reimplemented this optimisation inside `needMaskingText` where we are already had an `isElement` test Thanks to @Paulhejia (https://github.com/Paulhejia/rrweb/) for spotting that `Boolean(n.childNodes)` is aways true. * Assuming all jest should have been removed in #1033 (#1511) * all references to jest should have been removed in #1033 * clarify that `cross-env` is used to ensure that environmental variables get applied on Windows (previous usage of cross-env was removed in #1033) * Fix async assertions in test files (#1510) * fix: await assertSnapshot in test files for async assertions * Fix maskInputFn is ignored during the creation of the full snapshot (#1386) Fix that the optional `maskInputFn` was being accidentally ignored during the creation of the full snapshot * Improve development tooling (#1516) - Running `yarn build` in a `packages/*/` directory will trigger build of all dependencies too, and cache them if possible. - Fix for `yarn dev` breaking for `rrweb` package whenever changing files in `rrweb` package - Update typescript, turbo, vite and vite-plugin-dts - Require `workspaces-to-typescript-project-references` from `prepublish` * Version Packages (alpha) (#1513) Co-authored-by: github-actions[bot] * Keep all packages in sync * feat: add new css parser - postcss (#1458) * feat: add new css parser * make selectors change * selectors and tests * media changes * remove old css references * better variable name * use postcss and port tests * fix media test * inline plugins * fix failing multiline selector * correct test result * move tests to correct file * cleanup all tests * remove unused css-tree * update bundle * cleanup dependencies * revert config files to master * remove d.ts files * update snapshot * reset rebuilt test * apply fuzzy css matching * remove extra test * Fix imports * Newer versions of nswapi break rrdom-nodejs tests. Example: FAIL test/document-nodejs.test.ts > RRDocument for nodejs environment > RRDocument API > querySelectorAll TypeError: e[api] is not a function ❯ byTag ../../node_modules/nwsapi/src/nwsapi.js:390:37 ❯ Array. ../../node_modules/nwsapi/src/nwsapi.js:327:113 ❯ collect ../../node_modules/nwsapi/src/nwsapi.js:1578:32 ❯ Object._querySelectorAll [as select] ../../node_modules/nwsapi/src/nwsapi.js:1533:36 ❯ RRDocument.querySelectorAll src/document-nodejs.ts:96:24 * Migrate from jest to vitest * Order of selectors has changed with postcss * Remove unused eslint --------- Co-authored-by: Justin Halsall * fix: console assert only logs when arg 0 is falsy (#1530) * fix: console assert only logs when arg 0 is falsy * [Feature] Include takeFullSnapshot function in rrweb (#1527) * export takeFullSnapshot function in rrweb * chore: reduce flakey test due to '[vite] connected' message (#1525) * fix: duplicate textContent for style element cause incremental style mutation invalid (#1417) fix style element corner case - historically we have recorded duplicated css content in certain cases (demonstrated by the attached replayer test). This fix ensures that the replayer doesn't doubly add the content, which can cause problems when further mutations occur --------- Review and further tests contributed by: Eoghan Murray * Added support for deprecated addRule & removeRule methods (#1515) * Added support for deprecated addRule & removeRule methods * Respect addRule default value * fix: nested stylesheets should have absolute URLs (#1533) * Replace relative URLs with absolute URLs when stringifying stylesheets * Add test to show desired behavior for imported stylesheets from seperate directory * Rename `absoluteToStylesheet` to `absolutifyURLs` and call it once after stringifying imported stylesheet * Don't create the intermediary array of the spread operator * Formalize that `stringifyRule` should expect a sheet href * Ensure a +
hover me
" @@ -487,7 +613,7 @@ exports[`integration tests > [html file]: with-style-sheet.html 1`] = ` with style sheet - + " `; @@ -498,11 +624,224 @@ exports[`integration tests > [html file]: with-style-sheet-with-import.html 1`] with style sheet with import - + + " `; +exports[`integration tests > should be able to record elements even when .childNodes has been monkey patched 1`] = ` +"{ + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 1, + \\"name\\": \\"html\\", + \\"publicId\\": \\"\\", + \\"systemId\\": \\"\\", + \\"id\\": 2 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": { + \\"lang\\": \\"en\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 5 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"charset\\": \\"UTF-8\\" + }, + \\"childNodes\\": [], + \\"id\\": 6 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 7 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"name\\": \\"viewport\\", + \\"content\\": \\"width=device-width, initial-scale=1.0\\" + }, + \\"childNodes\\": [], + \\"id\\": 8 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 9 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"title\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"Document\\", + \\"id\\": 11 + } + ], + \\"id\\": 10 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 12 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 14 + } + ], + \\"id\\": 13 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 15 + } + ], + \\"id\\": 4 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 16 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 18 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"ul\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 20 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"li\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"a\\", + \\"id\\": 22 + } + ], + \\"id\\": 21 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 23 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"li\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"b\\", + \\"id\\": 25 + } + ], + \\"id\\": 24 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 26 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"li\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"c\\", + \\"id\\": 28 + } + ], + \\"id\\": 27 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 29 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"li\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"d\\", + \\"id\\": 31 + } + ], + \\"id\\": 30 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 32 + } + ], + \\"id\\": 19 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n\\\\n\\", + \\"id\\": 33 + } + ], + \\"id\\": 17 + } + ], + \\"id\\": 3 + } + ], + \\"id\\": 1 +}" +`; + exports[`shadow DOM integration tests > snapshot shadow DOM 1`] = ` "{ \\"type\\": 0, @@ -755,12 +1094,13 @@ exports[`shadow DOM integration tests > snapshot shadow DOM 1`] = ` { \\"type\\": 2, \\"tagName\\": \\"style\\", - \\"attributes\\": {}, + \\"attributes\\": { + \\"_cssText\\": \\":host { display: inline-block; width: 650px; font-family: \\\\\\"Roboto Slab\\\\\\"; contain: content; }:host([background]) { background: var(--background-color, #9E9E9E); border-radius: 10px; padding: 10px; }#panels { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 2px; background: white; border-radius: 3px; padding: 16px; height: 250px; overflow: auto; }#tabs { display: inline-flex; user-select: none; }#tabs slot { display: inline-flex; }#tabs ::slotted(*) { font: 400 16px / 22px Roboto; padding: 16px 8px; margin: 0px; text-align: center; width: 100px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; border-top-left-radius: 3px; border-top-right-radius: 3px; background: linear-gradient(rgb(250, 250, 250), rgb(238, 238, 238)); border: none; }#tabs ::slotted([aria-selected=\\\\\\"true\\\\\\"]) { font-weight: 600; background: white; box-shadow: none; }#tabs ::slotted(:focus) { z-index: 1; }#panels ::slotted([aria-hidden=\\\\\\"true\\\\\\"]) { display: none; }\\" + }, \\"childNodes\\": [ { \\"type\\": 3, - \\"textContent\\": \\":host { display: inline-block; width: 650px; font-family: \\\\\\"Roboto Slab\\\\\\"; contain: content; }:host([background]) { background: var(--background-color, #9E9E9E); border-radius: 10px; padding: 10px; }#panels { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 2px; background: white; border-radius: 3px; padding: 16px; height: 250px; overflow: auto; }#tabs { display: inline-flex; user-select: none; }#tabs slot { display: inline-flex; }#tabs ::slotted(*) { font: 400 16px / 22px Roboto; padding: 16px 8px; margin: 0px; text-align: center; width: 100px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; border-top-left-radius: 3px; border-top-right-radius: 3px; background: linear-gradient(rgb(250, 250, 250), rgb(238, 238, 238)); border: none; }#tabs ::slotted([aria-selected=\\\\\\"true\\\\\\"]) { font-weight: 600; background: white; box-shadow: none; }#tabs ::slotted(:focus) { z-index: 1; }#panels ::slotted([aria-hidden=\\\\\\"true\\\\\\"]) { display: none; }\\", - \\"isStyle\\": true, + \\"textContent\\": \\"\\", \\"id\\": 38 } ], diff --git a/packages/rrweb-snapshot/test/alt-css/alt-style.css b/packages/rrweb-snapshot/test/alt-css/alt-style.css new file mode 100644 index 0000000000..bda88053d8 --- /dev/null +++ b/packages/rrweb-snapshot/test/alt-css/alt-style.css @@ -0,0 +1,12 @@ +body { + margin: 0; + background: url('../should-be-in-root-folder.jpg'); + border-image: url('data:image/svg+xml;utf8,'); + } + p { + color: red; + background: url('./should-be-in-alt-css-folder.jpg'); + } + body > p { + color: yellow; + } diff --git a/packages/rrweb-snapshot/test/css.test.ts b/packages/rrweb-snapshot/test/css.test.ts index fc8e5a2946..75e261c102 100644 --- a/packages/rrweb-snapshot/test/css.test.ts +++ b/packages/rrweb-snapshot/test/css.test.ts @@ -1,255 +1,250 @@ -import { describe, it, expect } from 'vitest'; -import { parse, Rule, Media } from '../src/css'; -import { fixSafariColons, escapeImportStatement } from './../src/utils'; +/** + * @vitest-environment jsdom + */ +import { describe, it, beforeEach, expect } from 'vitest'; +import { mediaSelectorPlugin, pseudoClassPlugin } from '../src/css'; +import postcss, { type AcceptedPlugin } from 'postcss'; +import { JSDOM } from 'jsdom'; +import { splitCssText, stringifyStylesheet } from './../src/utils'; +import { applyCssSplits } from './../src/rebuild'; +import { + NodeType, + type serializedElementNodeWithId, + type BuildCache, + type textNode, +} from '../src/types'; +import { Window } from 'happy-dom'; describe('css parser', () => { - it('should save the filename and source', () => { - const css = 'booty {\n size: large;\n}\n'; - const ast = parse(css, { - source: 'booty.css', + function parse(plugin: AcceptedPlugin, input: string): string { + const ast = postcss([plugin]).process(input, {}); + return ast.css; + } + + describe('mediaSelectorPlugin', () => { + it('selectors without device remain unchanged', () => { + const cssText = + '@media only screen and (min-width: 1200px) { .a { width: 10px; }}'; + expect(parse(mediaSelectorPlugin, cssText)).toEqual(cssText); }); - expect(ast.stylesheet!.source).toEqual('booty.css'); - - const position = ast.stylesheet!.rules[0].position!; - expect(position.start).toBeTruthy(); - expect(position.end).toBeTruthy(); - expect(position.source).toEqual('booty.css'); - expect(position.content).toEqual(css); + it('can adapt media rules to replay context', () => { + [ + ['min', 'width'], + ['min', 'height'], + ['max', 'width'], + ['max', 'height'], + ].forEach(([first, second]) => { + expect( + parse( + mediaSelectorPlugin, + `@media only screen and (${first}-device-${second}: 1200px) { .a { width: 10px; }}`, + ), + ).toEqual( + `@media only screen and (${first}-${second}: 1200px) { .a { width: 10px; }}`, + ); + }); + }); }); - it('should throw when a selector is missing', () => { - expect(() => { - parse('{size: large}'); - }).toThrow(); + describe('pseudoClassPlugin', () => { + it('parses nested commas in selectors correctly', () => { + const cssText = + 'body > ul :is(li:not(:first-of-type) a.current, li:not(:first-of-type).active a) {background: red;}'; + expect(parse(pseudoClassPlugin, cssText)).toEqual(cssText); + }); - expect(() => { - parse('b { color: red; }\n{ color: green; }\na { color: blue; }'); - }).toThrow(); - }); + it("doesn't ignore :hover within :is brackets", () => { + const cssText = + 'body > ul :is(li:not(:first-of-type) a:hover, li:not(:first-of-type).active a) {background: red;}'; + expect(parse(pseudoClassPlugin, cssText)) + .toEqual(`body > ul :is(li:not(:first-of-type) a:hover, li:not(:first-of-type).active a), +body > ul :is(li:not(:first-of-type) a.\\:hover, li:not(:first-of-type).active a) {background: red;}`); + }); - it('should throw when a broken comment is found', () => { - expect(() => { - parse('thing { color: red; } /* b { color: blue; }'); - }).toThrow(); + it('should parse selector with comma nested inside ()', () => { + const cssText = + '[_nghost-ng-c4172599085]:not(.fit-content).aim-select:hover:not(:disabled, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--disabled, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--invalid, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--active) { border-color: rgb(84, 84, 84); }'; + expect(parse(pseudoClassPlugin, cssText)) + .toEqual(`[_nghost-ng-c4172599085]:not(.fit-content).aim-select:hover:not(:disabled, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--disabled, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--invalid, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--active), +[_nghost-ng-c4172599085]:not(.fit-content).aim-select.\\:hover:not(:disabled, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--disabled, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--invalid, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--active) { border-color: rgb(84, 84, 84); }`); + }); - expect(() => { - parse('/*'); - }).toThrow(); + it('ignores ( in strings', () => { + const cssText = + 'li[attr="weirdly("] a:hover, li[attr="weirdly)"] a {background-color: red;}'; + expect(parse(pseudoClassPlugin, cssText)) + .toEqual(`li[attr="weirdly("] a:hover, li[attr="weirdly)"] a, +li[attr="weirdly("] a.\\:hover {background-color: red;}`); + }); - /* Nested comments should be fine */ - expect(() => { - parse('/* /* */'); - }).not.toThrow(); - }); + it('ignores escaping in strings', () => { + const cssText = `li[attr="weirder\\"("] a:hover, li[attr="weirder\\")"] a {background-color: red;}`; + expect(parse(pseudoClassPlugin, cssText)) + .toEqual(`li[attr="weirder\\"("] a:hover, li[attr="weirder\\")"] a, +li[attr="weirder\\"("] a.\\:hover {background-color: red;}`); + }); - it('should allow empty property value', () => { - expect(() => { - parse('p { color:; }'); - }).not.toThrow(); + it('ignores comma in string', () => { + const cssText = 'li[attr="has,comma"] a:hover {background: red;}'; + expect(parse(pseudoClassPlugin, cssText)).toEqual( + `li[attr="has,comma"] a:hover, +li[attr="has,comma"] a.\\:hover {background: red;}`, + ); + }); }); +}); - it('should not throw with silent option', () => { - expect(() => { - parse('thing { color: red; } /* b { color: blue; }', { silent: true }); - }).not.toThrow(); +describe('css splitter', () => { + it('finds css textElement splits correctly', () => { + const window = new Window({ url: 'https://localhost:8080' }); + const document = window.document; + document.head.innerHTML = ''; + const style = document.querySelector('style'); + if (style) { + // as authored, e.g. no spaces + style.append('.a{background-color:black;}'); + + // how it is currently stringified (spaces present) + const expected = [ + '.a { background-color: red; }', + '.a { background-color: black; }', + ]; + const browserSheet = expected.join(''); + expect(stringifyStylesheet(style.sheet!)).toEqual(browserSheet); + + expect(splitCssText(browserSheet, style)).toEqual(expected); + } }); - it('should list the parsing errors and continue parsing', () => { - const result = parse( - 'foo { color= red; } bar { color: blue; } baz {}} boo { display: none}', - { - silent: true, - source: 'foo.css', - }, - ); - - const rules = result.stylesheet!.rules; - expect(rules.length).toBeGreaterThan(2); - - const errors = result.stylesheet!.parsingErrors!; - expect(errors.length).toEqual(2); - - expect(errors[0]).toHaveProperty('message'); - expect(errors[0]).toHaveProperty('reason'); - expect(errors[0]).toHaveProperty('filename'); - expect(errors[0]).toHaveProperty('line'); - expect(errors[0]).toHaveProperty('column'); - expect(errors[0]).toHaveProperty('source'); - expect(errors[0].filename).toEqual('foo.css'); + it('finds css textElement splits correctly when comments are present', () => { + const window = new Window({ url: 'https://localhost:8080' }); + const document = window.document; + // as authored, with comment, missing semicolons + document.head.innerHTML = + ''; + const style = document.querySelector('style'); + if (style) { + style.append('/* author comment */.a{color:red}.b{color:green}'); + + // how it is currently stringified (spaces present) + const expected = [ + '.a { color: red; } .b { color: blue; }', + '.a { color: red; } .b { color: green; }', + ]; + const browserSheet = expected.join(''); + expect(splitCssText(browserSheet, style)).toEqual(expected); + } }); - it('should parse selector with comma nested inside ()', () => { - const result = parse( - '[_nghost-ng-c4172599085]:not(.fit-content).aim-select:hover:not(:disabled, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--disabled, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--invalid, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--active) { border-color: rgb(84, 84, 84); }', - ); - - expect(result.parent).toEqual(null); - - const rules = result.stylesheet!.rules; - expect(rules.length).toEqual(1); - - let rule = rules[0] as Rule; - expect(rule.parent).toEqual(result); - expect(rule.selectors?.length).toEqual(1); - - let decl = rule.declarations![0]; - expect(decl.parent).toEqual(rule); + it('finds css textElement splits correctly when vendor prefixed rules have been removed', () => { + const style = JSDOM.fragment(``).querySelector('style'); + if (style) { + // as authored, with newlines + style.appendChild( + JSDOM.fragment(`.x { + -webkit-transition: all 4s ease; + content: 'try to keep a newline'; + transition: all 4s ease; +}`), + ); + // TODO: splitCssText can't handle it yet if both start with .x + style.appendChild( + JSDOM.fragment(`.y { + -moz-transition: all 5s ease; + transition: all 5s ease; +}`), + ); + // browser .rules would usually omit the vendored versions and modifies the transition value + const expected = [ + '.x { content: "try to keep a newline"; background: red; transition: 4s; }', + '.y { transition: 5s; }', + ]; + const browserSheet = expected.join(''); + + // can't do this as JSDOM doesn't have style.sheet + // also happy-dom doesn't strip out vendor-prefixed rules like a real browser does + //expect(stringifyStylesheet(style.sheet!)).toEqual(browserSheet); + + expect(splitCssText(browserSheet, style)).toEqual(expected); + } }); +}); - it('parses { and } in attribute selectors correctly', () => { - const result = parse('foo[someAttr~="{someId}"] { color: red; }'); - const rules = result.stylesheet!.rules; - - expect(rules.length).toEqual(1); - - const rule = rules[0] as Rule; - - expect(rule.selectors![0]).toEqual('foo[someAttr~="{someId}"]'); +describe('applyCssSplits css rejoiner', function () { + const mockLastUnusedArg = null as unknown as BuildCache; + const halfCssText = '.a { background-color: red; }'; + const otherHalfCssText = halfCssText.replace('.a', '.x'); + const markedCssText = [halfCssText, otherHalfCssText].join('/* rr_split */'); + let sn: serializedElementNodeWithId; + + beforeEach(() => { + sn = { + type: NodeType.Element, + tagName: 'style', + childNodes: [ + { + type: NodeType.Text, + textContent: '', + }, + { + type: NodeType.Text, + textContent: '', + }, + ], + } as serializedElementNodeWithId; }); - it('should set parent property', () => { - const result = parse( - 'thing { test: value; }\n' + - '@media (min-width: 100px) { thing { test: value; } }', + it('applies css splits correctly', () => { + // happy path + applyCssSplits(sn, markedCssText, false, mockLastUnusedArg); + expect((sn.childNodes[0] as textNode).textContent).toEqual(halfCssText); + expect((sn.childNodes[1] as textNode).textContent).toEqual( + otherHalfCssText, ); - - expect(result.parent).toEqual(null); - - const rules = result.stylesheet!.rules; - expect(rules.length).toEqual(2); - - let rule = rules[0] as Rule; - expect(rule.parent).toEqual(result); - expect(rule.declarations!.length).toEqual(1); - - let decl = rule.declarations![0]; - expect(decl.parent).toEqual(rule); - - const media = rules[1] as Media; - expect(media.parent).toEqual(result); - expect(media.rules!.length).toEqual(1); - - rule = media.rules![0] as Rule; - expect(rule.parent).toEqual(media); - - expect(rule.declarations!.length).toEqual(1); - decl = rule.declarations![0]; - expect(decl.parent).toEqual(rule); - }); - - it('parses : in attribute selectors correctly', () => { - const out1 = fixSafariColons('[data-foo] { color: red; }'); - expect(out1).toEqual('[data-foo] { color: red; }'); - - const out2 = fixSafariColons('[data-foo:other] { color: red; }'); - expect(out2).toEqual('[data-foo\\:other] { color: red; }'); - - const out3 = fixSafariColons('[data-aa\\:other] { color: red; }'); - expect(out3).toEqual('[data-aa\\:other] { color: red; }'); }); - it('parses nested commas in selectors correctly', () => { - const result = parse( - ` -body > ul :is(li:not(:first-of-type) a:hover, li:not(:first-of-type).active a) { - background: red; -} -`, + it('applies css splits correctly even when there are too many child nodes', () => { + let sn3 = { + type: NodeType.Element, + tagName: 'style', + childNodes: [ + { + type: NodeType.Text, + textContent: '', + }, + { + type: NodeType.Text, + textContent: '', + }, + { + type: NodeType.Text, + textContent: '', + }, + ], + } as serializedElementNodeWithId; + applyCssSplits(sn3, markedCssText, false, mockLastUnusedArg); + expect((sn3.childNodes[0] as textNode).textContent).toEqual(halfCssText); + expect((sn3.childNodes[1] as textNode).textContent).toEqual( + otherHalfCssText, ); - expect((result.stylesheet!.rules[0] as Rule)!.selectors!.length).toEqual(1); - - const trickresult = parse( - ` -li[attr="weirdly("] a:hover, li[attr="weirdly)"] a { - background-color: red; -} -`, - ); - expect( - (trickresult.stylesheet!.rules[0] as Rule)!.selectors!.length, - ).toEqual(2); - - const weirderresult = parse( - ` -li[attr="weirder\\"("] a:hover, li[attr="weirder\\")"] a { - background-color: red; -} -`, - ); - expect( - (weirderresult.stylesheet!.rules[0] as Rule)!.selectors!.length, - ).toEqual(2); - - const commainstrresult = parse( - ` -li[attr="has,comma"] a:hover { - background-color: red; -} -`, - ); - expect( - (commainstrresult.stylesheet!.rules[0] as Rule)!.selectors!.length, - ).toEqual(1); + expect((sn3.childNodes[2] as textNode).textContent).toEqual(''); }); - it('parses imports with quotes correctly', () => { - const out1 = escapeImportStatement({ - cssText: `@import url("/foo.css;900;800"");`, - href: '/foo.css;900;800"', - media: { - length: 0, - }, - layerName: null, - supportsText: null, - } as unknown as CSSImportRule); - expect(out1).toEqual(`@import url("/foo.css;900;800\\"");`); - - const out2 = escapeImportStatement({ - cssText: `@import url("/foo.css;900;800"") supports(display: flex);`, - href: '/foo.css;900;800"', - media: { - length: 0, - }, - layerName: null, - supportsText: 'display: flex', - } as unknown as CSSImportRule); - expect(out2).toEqual( - `@import url("/foo.css;900;800\\"") supports(display: flex);`, + it('maintains entire css text when there are too few child nodes', () => { + let sn1 = { + type: NodeType.Element, + tagName: 'style', + childNodes: [ + { + type: NodeType.Text, + textContent: '', + }, + ], + } as serializedElementNodeWithId; + applyCssSplits(sn1, markedCssText, false, mockLastUnusedArg); + expect((sn1.childNodes[0] as textNode).textContent).toEqual( + halfCssText + otherHalfCssText, ); - - const out3 = escapeImportStatement({ - cssText: `@import url("/foo.css;900;800"");`, - href: '/foo.css;900;800"', - media: { - length: 1, - mediaText: 'print, screen', - }, - layerName: null, - supportsText: null, - } as unknown as CSSImportRule); - expect(out3).toEqual(`@import url("/foo.css;900;800\\"") print, screen;`); - - const out4 = escapeImportStatement({ - cssText: `@import url("/foo.css;900;800"") layer(layer-1);`, - href: '/foo.css;900;800"', - media: { - length: 0, - }, - layerName: 'layer-1', - supportsText: null, - } as unknown as CSSImportRule); - expect(out4).toEqual(`@import url("/foo.css;900;800\\"") layer(layer-1);`); - - const out5 = escapeImportStatement({ - cssText: `@import url("/foo.css;900;800"") layer;`, - href: '/foo.css;900;800"', - media: { - length: 0, - }, - layerName: '', - supportsText: null, - } as unknown as CSSImportRule); - expect(out5).toEqual(`@import url("/foo.css;900;800\\"") layer;`); }); }); diff --git a/packages/rrweb-snapshot/test/css/style-with-import.css b/packages/rrweb-snapshot/test/css/style-with-import.css index 5fa59d8039..a24d901947 100644 --- a/packages/rrweb-snapshot/test/css/style-with-import.css +++ b/packages/rrweb-snapshot/test/css/style-with-import.css @@ -1,2 +1,3 @@ @import '//fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Roboto:wght@100;300;400;500;700&display=swap"'; @import './style.css'; +@import '../alt-css/alt-style.css'; diff --git a/packages/rrweb-snapshot/test/css/style.css b/packages/rrweb-snapshot/test/css/style.css index 2b3faf2a77..29b1da8ec8 100644 --- a/packages/rrweb-snapshot/test/css/style.css +++ b/packages/rrweb-snapshot/test/css/style.css @@ -1,11 +1,11 @@ body { margin: 0; - background: url('../a.jpg'); + background: url('../should-be-in-root-folder.jpg'); border-image: url('data:image/svg+xml;utf8,'); } p { color: red; - background: url('./b.jpg'); + background: url('./should-be-in-css-folder.jpg'); } body > p { color: yellow; diff --git a/packages/rrweb-snapshot/test/html/dialog.html b/packages/rrweb-snapshot/test/html/dialog.html new file mode 100644 index 0000000000..2380b8fade --- /dev/null +++ b/packages/rrweb-snapshot/test/html/dialog.html @@ -0,0 +1,5 @@ + + + I'm a dialog + + diff --git a/packages/rrweb-snapshot/test/html/monkey-patched-elements.html b/packages/rrweb-snapshot/test/html/monkey-patched-elements.html new file mode 100644 index 0000000000..a48b8fd328 --- /dev/null +++ b/packages/rrweb-snapshot/test/html/monkey-patched-elements.html @@ -0,0 +1,45 @@ + + + + + + Document + + + +
    +
  • a
    • +
  • b
    • +
  • c
    • +
  • d
    • +
+ + diff --git a/packages/rrweb-snapshot/test/html/with-style-sheet-with-import.html b/packages/rrweb-snapshot/test/html/with-style-sheet-with-import.html index 6b45f65bc5..d98ff7b9fa 100644 --- a/packages/rrweb-snapshot/test/html/with-style-sheet-with-import.html +++ b/packages/rrweb-snapshot/test/html/with-style-sheet-with-import.html @@ -7,6 +7,10 @@ with style sheet with import + diff --git a/packages/rrweb-snapshot/test/integration.test.ts b/packages/rrweb-snapshot/test/integration.test.ts index 8f4476ecb9..9fa04baf65 100644 --- a/packages/rrweb-snapshot/test/integration.test.ts +++ b/packages/rrweb-snapshot/test/integration.test.ts @@ -1,10 +1,20 @@ import * as fs from 'fs'; -import * as path from 'path'; import * as http from 'http'; -import * as url from 'url'; +import * as path from 'path'; import * as puppeteer from 'puppeteer'; -import { vi, assert, describe, it, beforeAll, afterAll, expect } from 'vitest'; -import { waitForRAF, getServerURL } from './utils'; +import * as url from 'url'; +import { + afterAll, + assert, + beforeAll, + beforeEach, + describe, + expect, + it, + vi, +} from 'vitest'; + +import { getServerURL, waitForRAF } from './utils'; const htmlFolder = path.join(__dirname, 'html'); const htmls = fs.readdirSync(htmlFolder).map((filePath) => { @@ -60,6 +70,15 @@ function sanitizeSnapshot(snapshot: string): string { return snapshot.replace(/localhost:[0-9]+/g, 'localhost:3030'); } +async function snapshot(page: puppeteer.Page, code: string): Promise { + await waitForRAF(page); + const result = (await page.evaluate(`${code} + const snapshot = rrwebSnapshot.snapshot(document); + JSON.stringify(snapshot, null, 2); + `)) as string; + return result; +} + function assertSnapshot(snapshot: string): void { expect(sanitizeSnapshot(snapshot)).toMatchSnapshot(); } @@ -68,6 +87,7 @@ interface ISuite { server: http.Server; serverURL: string; browser: puppeteer.Browser; + page: puppeteer.Page; code: string; } @@ -100,6 +120,9 @@ describe('integration tests', function (this: ISuite) { if (html.filePath.substring(html.filePath.length - 1) === '~') { continue; } + // monkey patching breaks rebuild code + if (html.filePath.includes('monkey-patched-elements.html')) continue; + const title = '[html file]: ' + html.filePath; it(title, async () => { const page: puppeteer.Page = await browser.newPage(); @@ -153,7 +176,7 @@ describe('integration tests', function (this: ISuite) { 'blob:http://localhost:xxxx/...', ); - assertSnapshot(rebuildHtml); + await assertSnapshot(rebuildHtml); }); } @@ -235,7 +258,6 @@ iframe.contentDocument.querySelector('center').clientHeight it('correctly saves cross-origin images offline', async () => { const page: puppeteer.Page = await browser.newPage(); - await page.goto('about:blank', { waitUntil: 'load', }); @@ -348,7 +370,7 @@ iframe.contentDocument.querySelector('center').clientHeight it('should save background-clip: text; as the more compatible -webkit-background-clip: test;', async () => { const page: puppeteer.Page = await browser.newPage(); - await page.goto(`http://localhost:3030/html/background-clip-text.html`, { + await page.goto(`${serverURL}/html/background-clip-text.html`, { waitUntil: 'load', }); await waitForRAF(page); // wait for page to render @@ -366,13 +388,10 @@ iframe.contentDocument.querySelector('center').clientHeight it('images with inline onload should work', async () => { const page: puppeteer.Page = await browser.newPage(); - await page.goto( - 'http://localhost:3030/html/picture-with-inline-onload.html', - { - waitUntil: 'load', - }, - ); - await page.waitForSelector('img', { timeout: 1000 }); + await page.goto(`${serverURL}/html/picture-with-inline-onload.html`, { + waitUntil: 'load', + }); + await page.waitForSelector('img', { timeout: 2000 }); await page.evaluate(`${code}`); await page.evaluate(` var snapshot = rrwebSnapshot.snapshot(document, { @@ -386,6 +405,22 @@ iframe.contentDocument.querySelector('center').clientHeight )) as string; assert(fnName === 'onload'); }); + + it('should be able to record elements even when .childNodes has been monkey patched', async () => { + const page: puppeteer.Page = await browser.newPage(); + await page.goto(`${serverURL}/html/monkey-patched-elements.html`, { + waitUntil: 'load', + }); + await waitForRAF(page); // wait for page to render + const snapshotResult = JSON.stringify( + await page.evaluate(`${code}; + rrwebSnapshot.snapshot(document); + `), + null, + 2, + ); + expect(snapshotResult).toMatchSnapshot(); + }); }); describe('iframe integration tests', function (this: ISuite) { @@ -427,6 +462,53 @@ describe('iframe integration tests', function (this: ISuite) { null, 2, ); + await assertSnapshot(snapshotResult); + }); +}); + +describe('dialog integration tests', function (this: ISuite) { + vi.setConfig({ testTimeout: 30_000 }); + let server: ISuite['server']; + let serverURL: ISuite['serverURL']; + let browser: ISuite['browser']; + let code: ISuite['code']; + let page: ISuite['page']; + + beforeAll(async () => { + server = await startServer(); + serverURL = getServerURL(server); + browser = await puppeteer.launch({ + // headless: false, + }); + + code = fs.readFileSync( + path.resolve(__dirname, '../dist/rrweb-snapshot.umd.cjs'), + 'utf-8', + ); + }); + + beforeEach(async () => { + page = await browser.newPage(); + page.on('console', (msg) => console.log(msg.text())); + await page.goto(`${serverURL}/html/dialog.html`, { + waitUntil: 'load', + }); + }); + + afterAll(async () => { + await browser.close(); + await server.close(); + }); + + it('should capture open attribute for non modal dialogs', async () => { + page.evaluate('document.querySelector("dialog").show()'); + const snapshotResult = await snapshot(page, code); + assertSnapshot(snapshotResult); + }); + + it('should capture open attribute for modal dialogs', async () => { + await page.evaluate('document.querySelector("dialog").showModal()'); + const snapshotResult = await snapshot(page, code); assertSnapshot(snapshotResult); }); }); @@ -470,6 +552,6 @@ describe('shadow DOM integration tests', function (this: ISuite) { null, 2, ); - assertSnapshot(snapshotResult); + await assertSnapshot(snapshotResult); }); }); diff --git a/packages/rrweb-snapshot/test/rebuild.test.ts b/packages/rrweb-snapshot/test/rebuild.test.ts index c71e1e8510..a0994a2f88 100644 --- a/packages/rrweb-snapshot/test/rebuild.test.ts +++ b/packages/rrweb-snapshot/test/rebuild.test.ts @@ -3,14 +3,34 @@ */ import * as fs from 'fs'; import * as path from 'path'; -import { describe, it, beforeEach, expect } from 'vitest'; +import { beforeEach, describe, expect as _expect, it } from 'vitest'; import { adaptCssForReplay, buildNodeWithSN, createCache, } from '../src/rebuild'; import { NodeType } from '../src/types'; -import { createMirror, Mirror } from '../src/utils'; +import { createMirror, Mirror, normalizeCssString } from '../src/utils'; + +const expect = _expect as unknown as { + (actual: T): { + toMatchCss(expected: string): void; + } & ReturnType; +} & typeof _expect; + +expect.extend({ + toMatchCss: function (received: string, expected: string) { + const pass = normalizeCssString(received) === normalizeCssString(expected); + const message: () => string = () => + pass + ? '' + : `Received (${received}) is not the same as expected (${expected})`; + return { + message, + pass, + }; + }, +}); function getDuration(hrtime: [number, number]) { const [seconds, nanoseconds] = hrtime; @@ -52,6 +72,32 @@ describe('rebuild', function () { }); }); + describe('rr_width/rr_height', function () { + it('rebuild blocked element with correct dimensions', function () { + const node = buildNodeWithSN( + { + id: 1, + tagName: 'svg', + type: NodeType.Element, + isSVG: true, + attributes: { + rr_width: '50px', + rr_height: '50px', + }, + childNodes: [], + }, + { + doc: document, + mirror, + hackCss: false, + cache, + }, + ) as HTMLDivElement; + expect(node.style.width).toBe('50px'); + expect(node.style.height).toBe('50px'); + }); + }); + describe('shadowDom', function () { it('rebuild shadowRoot without siblings', function () { const node = buildNodeWithSN( @@ -86,19 +132,19 @@ describe('rebuild', function () { describe('add hover class to hover selector related rules', function () { it('will do nothing to css text without :hover', () => { const cssText = 'body { color: white }'; - expect(adaptCssForReplay(cssText, cache)).toEqual(cssText); + expect(adaptCssForReplay(cssText, cache)).toMatchCss(cssText); }); it('can add hover class to css text', () => { const cssText = '.a:hover { color: white }'; - expect(adaptCssForReplay(cssText, cache)).toEqual( + expect(adaptCssForReplay(cssText, cache)).toMatchCss( '.a:hover, .a.\\:hover { color: white }', ); }); it('can correctly add hover when in middle of selector', () => { const cssText = 'ul li a:hover img { color: white }'; - expect(adaptCssForReplay(cssText, cache)).toEqual( + expect(adaptCssForReplay(cssText, cache)).toMatchCss( 'ul li a:hover img, ul li a.\\:hover img { color: white }', ); }); @@ -111,14 +157,15 @@ img, ul li.specified c:hover img { color: white }`; - expect(adaptCssForReplay(cssText, cache)).toEqual( - `ul li.specified a:hover img, ul li.specified a.\\:hover img, + expect(adaptCssForReplay(cssText, cache)).toMatchCss( + `ul li.specified a:hover img, ul li.multiline b:hover -img, ul li.multiline -b.\\:hover img, -ul li.specified c:hover img, ul li.specified c.\\:hover img { +ul li.specified c:hover img, +ul li.specified a.\\:hover img, +ul li.multiline b.\\:hover img, +ul li.specified c.\\:hover img { color: white }`, ); @@ -126,48 +173,48 @@ ul li.specified c:hover img, ul li.specified c.\\:hover img { it('can add hover class within media query', () => { const cssText = '@media screen { .m:hover { color: white } }'; - expect(adaptCssForReplay(cssText, cache)).toEqual( + expect(adaptCssForReplay(cssText, cache)).toMatchCss( '@media screen { .m:hover, .m.\\:hover { color: white } }', ); }); it('can add hover class when there is multi selector', () => { const cssText = '.a, .b:hover, .c { color: white }'; - expect(adaptCssForReplay(cssText, cache)).toEqual( - '.a, .b:hover, .b.\\:hover, .c { color: white }', + expect(adaptCssForReplay(cssText, cache)).toMatchCss( + '.a, .b:hover, .c, .b.\\:hover { color: white }', ); }); it('can add hover class when there is a multi selector with the same prefix', () => { const cssText = '.a:hover, .a:hover::after { color: white }'; - expect(adaptCssForReplay(cssText, cache)).toEqual( - '.a:hover, .a.\\:hover, .a:hover::after, .a.\\:hover::after { color: white }', + expect(adaptCssForReplay(cssText, cache)).toMatchCss( + '.a:hover, .a:hover::after, .a.\\:hover, .a.\\:hover::after { color: white }', ); }); it('can add hover class when :hover is not the end of selector', () => { const cssText = 'div:hover::after { color: white }'; - expect(adaptCssForReplay(cssText, cache)).toEqual( + expect(adaptCssForReplay(cssText, cache)).toMatchCss( '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(adaptCssForReplay(cssText, cache)).toEqual( + expect(adaptCssForReplay(cssText, cache)).toMatchCss( 'a:hover b:hover, a.\\:hover b.\\:hover { color: white }', ); }); it('will ignore :hover in css value', () => { const cssText = '.a::after { content: ":hover" }'; - expect(adaptCssForReplay(cssText, cache)).toEqual(cssText); + expect(adaptCssForReplay(cssText, cache)).toMatchCss(cssText); }); it('can adapt media rules to replay context', () => { const cssText = '@media only screen and (min-device-width : 1200px) { .a { width: 10px; }}'; - expect(adaptCssForReplay(cssText, cache)).toEqual( + expect(adaptCssForReplay(cssText, cache)).toMatchCss( '@media only screen and (min-width : 1200px) { .a { width: 10px; }}', ); }); @@ -210,7 +257,7 @@ ul li.specified c:hover img, ul li.specified c.\\:hover img { // previously that part was being incorrectly consumed by the selector regex const should_not_modify = ".tailwind :is(.before\\:content-\\[\\'\\'\\])::before { --tw-content: \":hover\"; content: var(--tw-content); }.tailwind :is(.\\[\\&\\>li\\]\\:before\\:content-\\[\\'-\\'\\] > li)::before { color: pink; }"; - expect(adaptCssForReplay(should_not_modify, cache)).toEqual( + expect(adaptCssForReplay(should_not_modify, cache)).toMatchCss( should_not_modify, ); }); @@ -219,7 +266,7 @@ ul li.specified c:hover img, ul li.specified c.\\:hover img { // the ':hover' in the below is a decoy which is not part of the selector, const should_not_modify = '@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,700;1,400&display=:hover");'; - expect(adaptCssForReplay(should_not_modify, cache)).toEqual( + expect(adaptCssForReplay(should_not_modify, cache)).toMatchCss( should_not_modify, ); }); diff --git a/packages/rrweb-snapshot/test/snapshot.test.ts b/packages/rrweb-snapshot/test/snapshot.test.ts index de1d79eb6d..5778eb0aff 100644 --- a/packages/rrweb-snapshot/test/snapshot.test.ts +++ b/packages/rrweb-snapshot/test/snapshot.test.ts @@ -2,64 +2,79 @@ * @vitest-environment jsdom */ import { JSDOM } from 'jsdom'; -import { describe, it, expect } from 'vitest'; -import { - absoluteToStylesheet, - serializeNodeWithId, +import { describe, expect, it } from 'vitest'; + +import snapshot, { _isBlockedElement, + serializeNodeWithId, } from '../src/snapshot'; -import snapshot from '../src/snapshot'; -import { serializedNodeWithId, elementNode } from '../src/types'; -import { Mirror } from '../src/utils'; +import { elementNode, serializedNodeWithId } from '../src/types'; +import { Mirror, absolutifyURLs } from '../src/utils'; + +const serializeNode = (node: Node): serializedNodeWithId | null => { + return serializeNodeWithId(node, { + doc: document, + mirror: new Mirror(), + blockClass: 'blockblock', + blockSelector: null, + maskTextClass: 'maskmask', + maskTextSelector: null, + skipChild: false, + inlineStylesheet: true, + maskTextFn: undefined, + maskInputFn: undefined, + slimDOMOptions: {}, + }); +}; describe('absolute url to stylesheet', () => { const href = 'http://localhost/css/style.css'; it('can handle relative path', () => { - expect(absoluteToStylesheet('url(a.jpg)', href)).toEqual( + expect(absolutifyURLs('url(a.jpg)', href)).toEqual( `url(http://localhost/css/a.jpg)`, ); }); it('can handle same level path', () => { - expect(absoluteToStylesheet('url("./a.jpg")', href)).toEqual( + expect(absolutifyURLs('url("./a.jpg")', href)).toEqual( `url("http://localhost/css/a.jpg")`, ); }); it('can handle parent level path', () => { - expect(absoluteToStylesheet('url("../a.jpg")', href)).toEqual( + expect(absolutifyURLs('url("../a.jpg")', href)).toEqual( `url("http://localhost/a.jpg")`, ); }); it('can handle absolute path', () => { - expect(absoluteToStylesheet('url("/a.jpg")', href)).toEqual( + expect(absolutifyURLs('url("/a.jpg")', href)).toEqual( `url("http://localhost/a.jpg")`, ); }); it('can handle external path', () => { - expect(absoluteToStylesheet('url("http://localhost/a.jpg")', href)).toEqual( + expect(absolutifyURLs('url("http://localhost/a.jpg")', href)).toEqual( `url("http://localhost/a.jpg")`, ); }); it('can handle single quote path', () => { - expect(absoluteToStylesheet(`url('./a.jpg')`, href)).toEqual( + expect(absolutifyURLs(`url('./a.jpg')`, href)).toEqual( `url('http://localhost/css/a.jpg')`, ); }); it('can handle no quote path', () => { - expect(absoluteToStylesheet('url(./a.jpg)', href)).toEqual( + expect(absolutifyURLs('url(./a.jpg)', href)).toEqual( `url(http://localhost/css/a.jpg)`, ); }); it('can handle multiple no quote paths', () => { expect( - absoluteToStylesheet( + absolutifyURLs( 'background-image: url(images/b.jpg);background: #aabbcc url(images/a.jpg) 50% 50% repeat;', href, ), @@ -70,11 +85,11 @@ describe('absolute url to stylesheet', () => { }); it('can handle data url image', () => { + expect(absolutifyURLs('url(data:image/gif;base64,ABC)', href)).toEqual( + 'url(data:image/gif;base64,ABC)', + ); expect( - absoluteToStylesheet('url(data:image/gif;base64,ABC)', href), - ).toEqual('url(data:image/gif;base64,ABC)'); - expect( - absoluteToStylesheet( + absolutifyURLs( 'url(data:application/font-woff;base64,d09GMgABAAAAAAm)', href, ), @@ -83,7 +98,7 @@ describe('absolute url to stylesheet', () => { it('preserves quotes around inline svgs with spaces', () => { expect( - absoluteToStylesheet( + absolutifyURLs( "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")", href, ), @@ -91,7 +106,7 @@ describe('absolute url to stylesheet', () => { "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")", ); expect( - absoluteToStylesheet( + absolutifyURLs( 'url(\'data:image/svg+xml;utf8,\')', href, ), @@ -99,7 +114,7 @@ describe('absolute url to stylesheet', () => { 'url(\'data:image/svg+xml;utf8,\')', ); expect( - absoluteToStylesheet( + absolutifyURLs( 'url("data:image/svg+xml;utf8,")', href, ), @@ -108,7 +123,7 @@ describe('absolute url to stylesheet', () => { ); }); it('can handle empty path', () => { - expect(absoluteToStylesheet(`url('')`, href)).toEqual(`url('')`); + expect(absolutifyURLs(`url('')`, href)).toEqual(`url('')`); }); }); @@ -139,22 +154,6 @@ describe('isBlockedElement()', () => { }); describe('style elements', () => { - const serializeNode = (node: Node): serializedNodeWithId | null => { - return serializeNodeWithId(node, { - doc: document, - mirror: new Mirror(), - blockClass: 'blockblock', - blockSelector: null, - maskTextClass: 'maskmask', - maskTextSelector: null, - skipChild: false, - inlineStylesheet: true, - maskTextFn: undefined, - maskInputFn: undefined, - slimDOMOptions: {}, - }); - }; - const render = (html: string): HTMLStyleElement => { document.write(html); return document.querySelector('style')!; @@ -163,44 +162,32 @@ describe('style elements', () => { it('should serialize all rules of stylesheet when the sheet has a single child node', () => { const styleEl = render(``); styleEl.sheet?.insertRule('section { color: blue; }'); - expect(serializeNode(styleEl.childNodes[0])).toMatchObject({ - isStyle: true, + expect(serializeNode(styleEl)).toMatchObject({ rootId: undefined, - textContent: 'section {color: blue;}body {color: red;}', - type: 3, + attributes: { + _cssText: 'section {color: blue;}body {color: red;}', + }, + type: 2, }); }); - it('should serialize individual text nodes on stylesheets with multiple child nodes', () => { + it('should serialize all rules on stylesheets with mix of insertion type', () => { const styleEl = render(``); + styleEl.sheet?.insertRule('section.lost { color: unseeable; }'); // browser throws this away after append styleEl.append(document.createTextNode('section { color: blue; }')); - expect(serializeNode(styleEl.childNodes[1])).toMatchObject({ - isStyle: true, + styleEl.sheet?.insertRule('section.working { color: pink; }'); + expect(serializeNode(styleEl)).toMatchObject({ rootId: undefined, - textContent: 'section { color: blue; }', - type: 3, + attributes: { + _cssText: + 'section.working {color: pink;}body {color: red;}/* rr_split */section {color: blue;}', + }, + type: 2, }); }); }); describe('scrollTop/scrollLeft', () => { - const serializeNode = (node: Node): serializedNodeWithId | null => { - return serializeNodeWithId(node, { - doc: document, - mirror: new Mirror(), - blockClass: 'blockblock', - blockSelector: null, - maskTextClass: 'maskmask', - maskTextSelector: null, - skipChild: false, - inlineStylesheet: true, - maskTextFn: undefined, - maskInputFn: undefined, - slimDOMOptions: {}, - newlyAddedElement: false, - }); - }; - const render = (html: string): HTMLDivElement => { document.write(html); return document.querySelector('div')!; @@ -222,23 +209,6 @@ describe('scrollTop/scrollLeft', () => { }); describe('form', () => { - const serializeNode = (node: Node): serializedNodeWithId | null => { - return serializeNodeWithId(node, { - doc: document, - mirror: new Mirror(), - blockClass: 'blockblock', - blockSelector: null, - maskTextClass: 'maskmask', - maskTextSelector: null, - skipChild: false, - inlineStylesheet: true, - maskTextFn: undefined, - maskInputFn: undefined, - slimDOMOptions: {}, - newlyAddedElement: false, - }); - }; - const render = (html: string): HTMLTextAreaElement => { document.write(html); return document.querySelector('textarea')!; diff --git a/packages/rrweb-snapshot/test/stringify-stylesheet.bench.ts b/packages/rrweb-snapshot/test/stringify-stylesheet.bench.ts new file mode 100644 index 0000000000..1e42bab1a6 --- /dev/null +++ b/packages/rrweb-snapshot/test/stringify-stylesheet.bench.ts @@ -0,0 +1,37 @@ +/** + * @vitest-environment jsdom + */ +import { bench } from 'vitest'; +import * as fs from 'fs'; +import * as path from 'path'; +import { stringifyStylesheet } from '../src/utils'; +import * as CSSOM from 'cssom'; + +describe('stringifyStylesheet', () => { + let benchmarkStylesheet: CSSStyleSheet; + + const cssText = fs.readFileSync( + path.resolve(__dirname, './css/benchmark.css'), + 'utf8', + ); + benchmarkStylesheet = CSSOM.parse(cssText); + benchmarkStylesheet.href = 'https://example.com/style.css'; + + it.skip('stringify', () => { + // written just to ensure it's working + const cssText = '.x { background: url(./relative.jpg) }'; + const styleSheet = CSSOM.parse(cssText); + styleSheet.href = 'https://example.com/style.css'; + expect(stringifyStylesheet(styleSheet)).toEqual( + 'x {background: url(https://example.com/relative.jpg);}', + ); + }); + + bench( + 'stringify', + () => { + stringifyStylesheet(benchmarkStylesheet); + }, + { time: 1000 }, + ); +}); diff --git a/packages/rrweb-snapshot/test/utils.test.ts b/packages/rrweb-snapshot/test/utils.test.ts index 2b09602ae4..885f4ec385 100644 --- a/packages/rrweb-snapshot/test/utils.test.ts +++ b/packages/rrweb-snapshot/test/utils.test.ts @@ -3,7 +3,12 @@ */ import { describe, it, test, expect } from 'vitest'; import { NodeType, serializedNode } from '../src/types'; -import { extractFileExtension, isNodeMetaEqual } from '../src/utils'; +import { + escapeImportStatement, + extractFileExtension, + fixSafariColons, + isNodeMetaEqual, +} from '../src/utils'; import type { serializedNodeWithId } from '@saola.ai/rrweb-snapshot'; describe('utils', () => { @@ -199,4 +204,80 @@ describe('utils', () => { expect(extension).toBe('js'); }); }); + + describe('escapeImportStatement', () => { + it('parses imports with quotes correctly', () => { + const out1 = escapeImportStatement({ + cssText: `@import url("/foo.css;900;800"");`, + href: '/foo.css;900;800"', + media: { + length: 0, + }, + layerName: null, + supportsText: null, + } as unknown as CSSImportRule); + expect(out1).toEqual(`@import url("/foo.css;900;800\\"");`); + + const out2 = escapeImportStatement({ + cssText: `@import url("/foo.css;900;800"") supports(display: flex);`, + href: '/foo.css;900;800"', + media: { + length: 0, + }, + layerName: null, + supportsText: 'display: flex', + } as unknown as CSSImportRule); + expect(out2).toEqual( + `@import url("/foo.css;900;800\\"") supports(display: flex);`, + ); + + const out3 = escapeImportStatement({ + cssText: `@import url("/foo.css;900;800"");`, + href: '/foo.css;900;800"', + media: { + length: 1, + mediaText: 'print, screen', + }, + layerName: null, + supportsText: null, + } as unknown as CSSImportRule); + expect(out3).toEqual(`@import url("/foo.css;900;800\\"") print, screen;`); + + const out4 = escapeImportStatement({ + cssText: `@import url("/foo.css;900;800"") layer(layer-1);`, + href: '/foo.css;900;800"', + media: { + length: 0, + }, + layerName: 'layer-1', + supportsText: null, + } as unknown as CSSImportRule); + expect(out4).toEqual( + `@import url("/foo.css;900;800\\"") layer(layer-1);`, + ); + + const out5 = escapeImportStatement({ + cssText: `@import url("/foo.css;900;800"") layer;`, + href: '/foo.css;900;800"', + media: { + length: 0, + }, + layerName: '', + supportsText: null, + } as unknown as CSSImportRule); + expect(out5).toEqual(`@import url("/foo.css;900;800\\"") layer;`); + }); + }); + describe('fixSafariColons', () => { + it('parses : in attribute selectors correctly', () => { + const out1 = fixSafariColons('[data-foo] { color: red; }'); + expect(out1).toEqual('[data-foo] { color: red; }'); + + const out2 = fixSafariColons('[data-foo:other] { color: red; }'); + expect(out2).toEqual('[data-foo\\:other] { color: red; }'); + + const out3 = fixSafariColons('[data-aa\\:other] { color: red; }'); + expect(out3).toEqual('[data-aa\\:other] { color: red; }'); + }); + }); }); diff --git a/packages/rrweb-snapshot/tsconfig.json b/packages/rrweb-snapshot/tsconfig.json index 82d5cc086b..cd2eb36538 100644 --- a/packages/rrweb-snapshot/tsconfig.json +++ b/packages/rrweb-snapshot/tsconfig.json @@ -1,7 +1,13 @@ { "extends": "../../tsconfig.base.json", - "include": ["src"], - "exclude": ["vite.config.ts", "vitest.config.ts", "test"], + "include": [ + "src" + ], + "exclude": [ + "vite.config.ts", + "vitest.config.ts", + "test" + ], "compilerOptions": { "rootDir": "src", "tsBuildInfoFile": "./tsconfig.tsbuildinfo" diff --git a/packages/rrweb-snapshot/vitest.config.ts b/packages/rrweb-snapshot/vitest.config.ts index 39888437cf..1b5a8b7e3e 100644 --- a/packages/rrweb-snapshot/vitest.config.ts +++ b/packages/rrweb-snapshot/vitest.config.ts @@ -6,7 +6,7 @@ export default mergeConfig( configShared, defineProject({ test: { - // ... custom test config here + globals: true, }, }), ); diff --git a/packages/rrweb/CHANGELOG.md b/packages/rrweb/CHANGELOG.md index 8686ccbba0..69641c0e3d 100644 --- a/packages/rrweb/CHANGELOG.md +++ b/packages/rrweb/CHANGELOG.md @@ -1,5 +1,52 @@ # rrweb +## 2.0.13 + +### Patch Changes + +- Merge from rrweb remote upstream + +- Updated dependencies []: + - @saola.ai/rrweb-snapshot@2.0.13 + - @saola.ai/rrdom@2.0.13 + - @saola.ai/rrweb-types@2.0.13 + - @saola.ai/rrweb-utils@2.0.13 + +## 2.0.0-alpha.17 + +### Minor Changes + +- [#1503](https://github.com/rrweb-io/rrweb/pull/1503) [`335639a`](https://github.com/rrweb-io/rrweb/commit/335639af9b0ce7f70eb0f38ce113d877c7325158) Thanks [@Juice10](https://github.com/Juice10)! - Support top-layer components. Fixes #1381. + +### Patch Changes + +- [#1417](https://github.com/rrweb-io/rrweb/pull/1417) [`40bbc25`](https://github.com/rrweb-io/rrweb/commit/40bbc25fc287badc317a53f2d3f21b1c9f2b211b) Thanks [@YunFeng0817](https://github.com/YunFeng0817)! - fix: duplicate textContent for style elements cause incremental style mutations to be invalid + +- [#1527](https://github.com/rrweb-io/rrweb/pull/1527) [`68076b7`](https://github.com/rrweb-io/rrweb/commit/68076b724ff19d198d4f351a05063b85e1705a8c) Thanks [@arredgroup](https://github.com/arredgroup)! - Export takeFullSnapshot function for a recording process + +- [#1515](https://github.com/rrweb-io/rrweb/pull/1515) [`8059d96`](https://github.com/rrweb-io/rrweb/commit/8059d9695146626b102b2059a3a9b932d5f598f6) Thanks [@okejminja](https://github.com/okejminja)! - Added support for deprecated addRule & removeRule methods + +- [#1509](https://github.com/rrweb-io/rrweb/pull/1509) [`be6bf52`](https://github.com/rrweb-io/rrweb/commit/be6bf52c248c35de1b3491e3a3440ff61f876414) Thanks [@Juice10](https://github.com/Juice10)! - Reverse monkey patch built in methods to support LWC (and other frameworks like angular which monkey patch built in methods). + +- Updated dependencies [[`40bbc25`](https://github.com/rrweb-io/rrweb/commit/40bbc25fc287badc317a53f2d3f21b1c9f2b211b), [`335639a`](https://github.com/rrweb-io/rrweb/commit/335639af9b0ce7f70eb0f38ce113d877c7325158), [`335639a`](https://github.com/rrweb-io/rrweb/commit/335639af9b0ce7f70eb0f38ce113d877c7325158), [`d350da8`](https://github.com/rrweb-io/rrweb/commit/d350da8552d8616dd118ee550bdfbce082986562), [`be6bf52`](https://github.com/rrweb-io/rrweb/commit/be6bf52c248c35de1b3491e3a3440ff61f876414)]: + - rrweb-snapshot@2.0.0-alpha.17 + - rrdom@2.0.0-alpha.17 + - @rrweb/types@2.0.0-alpha.17 + - @rrweb/utils@2.0.0-alpha.17 + +## 2.0.0-alpha.16 + +### Patch Changes + +- [#1386](https://github.com/rrweb-io/rrweb/pull/1386) [`a2c8a1a`](https://github.com/rrweb-io/rrweb/commit/a2c8a1a37bfcf8389b280af792262c8263a979a3) Thanks [@ababik](https://github.com/ababik)! - Fix that the optional `maskInputFn` was being accidentally ignored during the creation of the full snapshot + +- [#1512](https://github.com/rrweb-io/rrweb/pull/1512) [`d08624c`](https://github.com/rrweb-io/rrweb/commit/d08624cb28add386c3618a0e6607424c3f1884d8) Thanks [@eoghanmurray](https://github.com/eoghanmurray)! - optimisation: skip mask check on leaf elements + +- Updated dependencies [[`a2c8a1a`](https://github.com/rrweb-io/rrweb/commit/a2c8a1a37bfcf8389b280af792262c8263a979a3), [`d08624c`](https://github.com/rrweb-io/rrweb/commit/d08624cb28add386c3618a0e6607424c3f1884d8)]: + - rrweb-snapshot@2.0.0-alpha.16 + - rrdom@2.0.0-alpha.16 + - @rrweb/types@2.0.0-alpha.16 + ## 2.0.12 ### Patch Changes diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json index 24e790a36d..3345ec6f26 100644 --- a/packages/rrweb/package.json +++ b/packages/rrweb/package.json @@ -1,24 +1,25 @@ { "name": "@saola.ai/rrweb", - "version": "2.0.12", + "version": "2.0.13", "description": "record and replay the web", "scripts": { "prepare": "npm run prepack", "prepack": "npm run build", - "retest": "vitest run --exclude test/benchmark", + "retest": "cross-env PUPPETEER_HEADLESS=true yarn retest:headful", + "retest:headful": "vitest run --exclude test/benchmark", "build-and-test": "yarn build && yarn retest", - "test:headless": "PUPPETEER_HEADLESS=true yarn build-and-test", - "test:headful": "PUPPETEER_HEADLESS=false yarn build-and-test", + "test:headless": "cross-env PUPPETEER_HEADLESS=true yarn build-and-test", + "test:headful": "cross-env PUPPETEER_HEADLESS=false yarn build-and-test", "test": "yarn test:headless", - "test:watch": "yarn build && PUPPETEER_HEADLESS=true yarn vitest --exclude test/benchmark", + "test:watch": "yarn build && cross-env PUPPETEER_HEADLESS=true yarn vitest --exclude test/benchmark", "test:update": "yarn test:headless --update", - "retest:update": "PUPPETEER_HEADLESS=true yarn retest --update", + "retest:update": "cross-env PUPPETEER_HEADLESS=true yarn retest --update", "repl": "yarn build && node scripts/repl.js", "live-stream": "yarn build && node scripts/stream.js", "dev": "vite build --watch", - "build": "tsc -noEmit && vite build", + "build": "yarn turbo run prepublish", "check-types": "tsc -noEmit", - "prepublish": "npm run build", + "prepublish": "tsc -noEmit && vite build", "lint": "yarn eslint src", "benchmark": "vitest run --maxConcurrency 1 --no-file-parallelism test/benchmark" }, @@ -68,7 +69,6 @@ "@types/node": "^18.15.11", "@types/offscreencanvas": "^2019.6.4", "construct-style-sheets-polyfill": "^3.1.0", - "cross-env": "^5.2.0", "fast-mhtml": "^1.1.9", "identity-obj-proxy": "^3.0.0", "ignore-styles": "^5.0.1", @@ -78,17 +78,18 @@ "simple-peer-light": "^9.10.0", "ts-node": "^10.9.1", "tslib": "^2.3.1", - "typescript": "^4.7.3", - "vite": "^5.2.8", - "vite-plugin-dts": "^3.8.1" + "typescript": "^5.4.5", + "vite": "^5.3.1", + "vite-plugin-dts": "^3.9.1" }, "dependencies": { - "@saola.ai/rrweb-types": "^2.0.12", + "@saola.ai/rrweb-types": "^2.0.13", + "@saola.ai/rrweb-utils": "^2.0.13", "@types/css-font-loading-module": "0.0.7", "@xstate/fsm": "^1.4.0", "base64-arraybuffer": "^1.0.1", "mitt": "^3.0.0", - "@saola.ai/rrdom": "^2.0.12", - "@saola.ai/rrweb-snapshot": "^2.0.12" + "@saola.ai/rrdom": "^2.0.13", + "@saola.ai/rrweb-snapshot": "^2.0.13" } } diff --git a/packages/rrweb/src/index.ts b/packages/rrweb/src/index.ts index e013aab4e7..cbb8c566d9 100644 --- a/packages/rrweb/src/index.ts +++ b/packages/rrweb/src/index.ts @@ -17,19 +17,24 @@ export { type eventWithTime, } from '@saola.ai/rrweb-types'; +// exports style.css from replay +import './replay/styles/style.css'; + export type { recordOptions, ReplayPlugin } from './types'; const { addCustomEvent } = record; const { freezePage } = record; +const { takeFullSnapshot } = record; export { record, addCustomEvent, freezePage, + takeFullSnapshot, Replayer, - playerConfig, - PlayerMachineState, - SpeedMachineState, + type playerConfig, + type PlayerMachineState, + type SpeedMachineState, canvasMutation, _mirror as mirror, utils, diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts index 7320a3c61e..a5bdd977b8 100644 --- a/packages/rrweb/src/record/index.ts +++ b/packages/rrweb/src/record/index.ts @@ -1,7 +1,7 @@ import { snapshot, - MaskInputOptions, - SlimDOMOptions, + type MaskInputOptions, + type SlimDOMOptions, createMirror, } from '@saola.ai/rrweb-snapshot'; import { initObservers, mutationBuffers } from './observer'; @@ -19,14 +19,14 @@ import { import type { recordOptions } from '../types'; import { EventType, - eventWithoutTime, - eventWithTime, + type eventWithoutTime, + type eventWithTime, IncrementalSource, - listenerHandler, - mutationCallbackParam, - scrollCallback, - canvasMutationParam, - adoptedStyleSheetParam, + type listenerHandler, + type mutationCallbackParam, + type scrollCallback, + type canvasMutationParam, + type adoptedStyleSheetParam, } from '@saola.ai/rrweb-types'; import type { CrossOriginIframeMessageEventContent } from '../types'; import { IframeManager } from './iframe-manager'; @@ -39,6 +39,7 @@ import { registerErrorHandler, unregisterErrorHandler, } from './error-handler'; +import dom from '@rrweb/utils'; let wrappedEmit!: (e: eventWithoutTime, isCheckout?: boolean) => void; @@ -383,6 +384,7 @@ function record( inlineStylesheet, maskAllInputs: maskInputOptions, maskTextFn, + maskInputFn, slimDOM: slimDOMOptions, dataURLOptions, recordCanvas, @@ -395,7 +397,8 @@ function record( stylesheetManager.trackLinkElement(n as HTMLLinkElement); } if (hasShadowRoot(n)) { - shadowDomManager.addShadowRoot(n.shadowRoot, document); + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + shadowDomManager.addShadowRoot(dom.shadowRoot(n as Node)!, document); } }, onIframeLoad: (iframe, childSn) => { diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts index 23ad493654..53537d03d2 100644 --- a/packages/rrweb/src/record/mutation.ts +++ b/packages/rrweb/src/record/mutation.ts @@ -32,6 +32,7 @@ import { getShadowHost, closestElementOfNode, } from '../utils'; +import dom from '@rrweb/utils'; type DoubleLinkedListNode = { previous: DoubleLinkedListNode | null; @@ -168,6 +169,7 @@ export default class MutationBuffer { private addedSet = new Set(); private movedSet = new Set(); private droppedSet = new Set(); + private removesSubTreeCache = new Set(); private mutationCb: observerParam['mutationCb']; private blockClass: observerParam['blockClass']; @@ -285,16 +287,27 @@ export default class MutationBuffer { return nextId; }; const pushAdd = (n: Node) => { - if ( - !n.parentNode || - !inDom(n) || - (n.parentNode as Element).tagName === 'TEXTAREA' - ) { + const parent = dom.parentNode(n); + if (!parent || !inDom(n)) { return; } - const parentId = isShadowRoot(n.parentNode) + let cssCaptured = false; + if (n.nodeType === Node.TEXT_NODE) { + const parentTag = (parent as Element).tagName; + if (parentTag === 'TEXTAREA') { + // genTextAreaValueMutation already called via parent + return; + } else if (parentTag === 'STYLE' && this.addedSet.has(parent)) { + // css content will be recorded via parent's _cssText attribute when + // mutation adds entire + + + + + + + + + diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts index 34d81da850..0ae70af289 100644 --- a/packages/rrweb/test/integration.test.ts +++ b/packages/rrweb/test/integration.test.ts @@ -81,7 +81,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('can record form interactions', async () => { @@ -98,10 +98,10 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); - it('can record textarea mutations correctly', async () => { + it('can record and replay textarea mutations correctly', async () => { const page: puppeteer.Page = await browser.newPage(); await page.goto('about:blank'); await page.setContent(getHtml.call(this, 'empty.html')); @@ -112,20 +112,29 @@ describe('record integration tests', function (this: ISuite) { const ta = document.createElement('textarea'); ta.innerText = 'pre value'; document.body.append(ta); + + const ta2 = document.createElement('textarea'); + ta2.id = 'ta2'; + document.body.append(ta2); }); - await page.waitForTimeout(5); + await waitForRAF(page); await page.evaluate(() => { const t = document.querySelector('textarea') as HTMLTextAreaElement; t.innerText = 'ok'; // this mutation should be recorded + + const ta2t = document.createTextNode('added'); + document.getElementById('ta2').append(ta2t); }); - await page.waitForTimeout(5); + await waitForRAF(page); await page.evaluate(() => { const t = document.querySelector('textarea') as HTMLTextAreaElement; (t.childNodes[0] as Text).appendData('3'); // this mutation is also valid + + document.getElementById('ta2').remove(); // done with this }); - await page.waitForTimeout(5); + await waitForRAF(page); await page.type('textarea', '1'); // types (inserts) at index 0, in front of existing text - await page.waitForTimeout(5); + await waitForRAF(page); await page.evaluate(() => { const t = document.querySelector('textarea') as HTMLTextAreaElement; // user has typed so childNode content should now be ignored @@ -136,13 +145,13 @@ describe('record integration tests', function (this: ISuite) { // there is nothing explicit in rrweb which enforces this, but this test may protect against // a future change where a mutation on a textarea incorrectly updates the .value }); - await page.waitForTimeout(5); + await waitForRAF(page); await page.type('textarea', '2'); // cursor is at index 1 const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); // check after each mutation and text input const replayTextareaValues = await page.evaluate(` @@ -153,12 +162,18 @@ describe('record integration tests', function (this: ISuite) { replayer.pause((e.timestamp - window.snapshots[0].timestamp)+1); let ts = replayer.iframe.contentDocument.querySelector('textarea'); vals.push((e.data.source === 0 ? 'Mutation' : 'User') + ':' + ts.value); + let ts2 = replayer.iframe.contentDocument.getElementById('ta2'); + if (ts2) { + vals.push('ta2:' + ts2.value); + } }); vals; `); expect(replayTextareaValues).toEqual([ 'Mutation:pre value', + 'ta2:', 'Mutation:ok', + 'ta2:added', 'Mutation:ok3', 'User:1ok3', 'Mutation:1ok3', // if this gets set to 'ignore', it's an error, as the 'user' has modified the textarea @@ -166,6 +181,131 @@ describe('record integration tests', function (this: ISuite) { ]); }); + it('can record and replay style mutations', async () => { + // This test shows that the `isStyle` attribute on textContent is not needed in a mutation + // TODO: we could get a lot more elaborate here with mixed textContent and insertRule mutations + const page: puppeteer.Page = await browser.newPage(); + await page.goto(`${serverURL}/html`); + await page.setContent(getHtml.call(this, 'style.html')); + + await waitForRAF(page); // ensure mutations aren't included in fullsnapshot + + await page.evaluate(() => { + let styleEl = document.querySelector('style#dual-textContent'); + if (styleEl) { + styleEl.append( + document.createTextNode('body { background-color: darkgreen; }'), + ); + styleEl.append( + document.createTextNode( + '.absolutify { background-image: url("./rel"); }', + ), + ); + } + }); + await waitForRAF(page); + await page.evaluate(() => { + let styleEl = document.querySelector('style#dual-textContent'); + if (styleEl) { + styleEl.childNodes.forEach((cn) => { + if (cn.textContent) { + cn.textContent = cn.textContent.replace('darkgreen', 'purple'); + cn.textContent = cn.textContent.replace( + 'orange !important', + 'yellow', + ); + } + }); + } + }); + await waitForRAF(page); + await page.evaluate(() => { + let styleEl = document.querySelector('style#dual-textContent'); + if (styleEl) { + styleEl.childNodes.forEach((cn) => { + if (cn.textContent) { + cn.textContent = cn.textContent.replace( + 'black', + 'black !important', + ); + } + }); + } + let hoverMutationStyleEl = document.querySelector('style#hover-mutation'); + if (hoverMutationStyleEl) { + hoverMutationStyleEl.childNodes.forEach((cn) => { + if (cn.textContent) { + cn.textContent = 'a:hover { outline: cyan solid 1px; }'; + } + }); + } + let st = document.createElement('style'); + st.id = 'goldilocks'; + st.innerText = 'body { color: brown }'; + document.body.append(st); + }); + + await waitForRAF(page); + await page.evaluate(() => { + let styleEl = document.querySelector('style#goldilocks'); + if (styleEl) { + styleEl.childNodes.forEach((cn) => { + if (cn.textContent) { + cn.textContent = cn.textContent.replace('brown', 'gold'); + } + }); + } + }); + + const snapshots = (await page.evaluate( + 'window.snapshots', + )) as eventWithTime[]; + + // following ensures that the ./rel url has been absolutized (in a mutation) + await assertSnapshot(snapshots); + + // check after each mutation and text input + const replayStyleValues = await page.evaluate(` + const { Replayer } = rrweb; + const replayer = new Replayer(window.snapshots); + const vals = []; + window.snapshots.filter((e)=>e.data.attributes || e.data.source === 5).forEach((e)=>{ + replayer.pause((e.timestamp - window.snapshots[0].timestamp)+1); + let bodyStyle = getComputedStyle(replayer.iframe.contentDocument.querySelector('body')) + vals.push({ + 'background-color': bodyStyle['background-color'], + 'color': bodyStyle['color'], + }); + }); + vals.push(replayer.iframe.contentDocument.getElementById('single-textContent').innerText); + vals.push(replayer.iframe.contentDocument.getElementById('empty').innerText); + vals.push(replayer.iframe.contentDocument.getElementById('hover-mutation').innerText); + vals; +`); + + expect(replayStyleValues).toEqual([ + { + 'background-color': 'rgb(0, 100, 0)', // darkgreen + color: 'rgb(255, 165, 0)', // orange (from style.html) + }, + { + 'background-color': 'rgb(128, 0, 128)', // purple + color: 'rgb(255, 255, 0)', // yellow + }, + { + 'background-color': 'rgb(0, 0, 0)', // black !important + color: 'rgb(165, 42, 42)', // brown + }, + { + 'background-color': 'rgb(0, 0, 0)', + color: 'rgb(255, 215, 0)', // gold + }, + 'a:hover,\na.\\:hover { outline: red solid 1px; }', // has run adaptCssForReplay + 'a:hover,\na.\\:hover { outline: blue solid 1px; }', // has run adaptCssForReplay + 'a:hover,\na.\\:hover { outline: cyan solid 1px; }', // has run adaptCssForReplay after text mutation + ]); + }); + it('can record childList mutations', async () => { const page: puppeteer.Page = await browser.newPage(); await page.goto('about:blank'); @@ -183,7 +323,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('can record character data muatations', async () => { @@ -205,7 +345,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('can record attribute mutation', async () => { @@ -225,7 +365,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('handles null attribute values', async () => { @@ -253,7 +393,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('can record node mutations', async () => { @@ -272,7 +412,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('can record style changes compactly and preserve css var() functions', async () => { @@ -322,7 +462,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('can freeze mutations', async () => { @@ -358,7 +498,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should not record input events on ignored elements', async () => { @@ -394,7 +534,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('can use maskInputOptions to configure which type of inputs should be masked', async () => { @@ -420,7 +560,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should mask password value attribute with maskInputOptions', async () => { @@ -444,7 +584,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should mask inputs via function call', async () => { @@ -474,7 +614,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should record input userTriggered values if userTriggeredOnInput is enabled', async () => { @@ -494,7 +634,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should not record blocked elements and its child nodes', async () => { @@ -509,7 +649,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should not record blocked elements dynamically added', async () => { @@ -531,7 +671,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('mutations should work when blocked class is unblocked', async () => { @@ -552,7 +692,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should record DOM node movement 1', async () => { @@ -572,7 +712,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should record DOM node movement 2', async () => { @@ -589,7 +729,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should record dynamic CSS changes', async () => { @@ -600,7 +740,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should record canvas mutations', async () => { @@ -625,7 +765,7 @@ describe('record integration tests', function (this: ISuite) { }); } } - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should not record input values if dynamically added and maskAllInputs is true', async () => { @@ -662,7 +802,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('can correctly serialize a shader and multiple webgl contexts', async () => { @@ -677,7 +817,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('will serialize node before record', async () => { @@ -698,7 +838,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('will defer missing next node mutation', async () => { @@ -735,7 +875,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should record images with blob url', async () => { @@ -752,7 +892,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should record images inside iframe with blob url', async () => { @@ -769,7 +909,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should record images inside iframe with blob url after iframe was reloaded', async () => { @@ -792,7 +932,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should record shadow DOM', async () => { @@ -842,7 +982,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should record shadow DOM 2', async () => { @@ -867,7 +1007,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should record shadow DOM 3', async () => { @@ -888,7 +1028,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should record moved shadow DOM', async () => { @@ -917,7 +1057,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should record moved shadow DOM 2', async () => { @@ -955,7 +1095,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should record nested iframes and shadow doms', async () => { @@ -1000,7 +1140,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should record mutations in iframes accross pages', async () => { @@ -1030,7 +1170,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); // https://github.com/webcomponents/polyfills/tree/master/packages/shadydom @@ -1064,7 +1204,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); // https://github.com/salesforce/lwc/tree/master/packages/%40lwc/synthetic-shadow @@ -1106,7 +1246,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should mask texts', async () => { @@ -1121,7 +1261,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should mask texts using maskTextFn', async () => { @@ -1137,7 +1277,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should unmask texts using maskTextFn', async () => { @@ -1157,7 +1297,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('can mask character data mutations', async () => { @@ -1186,7 +1326,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('can mask character data mutations with regexp', async () => { @@ -1219,7 +1359,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should record after DOMContentLoaded event', async () => { @@ -1234,6 +1374,175 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); + }); + + /** + * the regression part of the following is now handled by replayer.test.ts::'can deal with duplicate/conflicting values on style elements' + * so this test could be dropped if we add more robust mixing of `insertRule` into 'can record and replay style mutations' + */ + it('should record style mutations and replay them correctly', async () => { + const page: puppeteer.Page = await browser.newPage(); + const OldColor = 'rgb(255, 0, 0)'; // red color + const NewColor = 'rgb(255, 255, 0)'; // yellow color + + await page.setContent( + ` + + + + + +
+
+ + + `, + ); + // Start rrweb recording + await page.evaluate( + (code, recordSnippet) => { + const script = document.createElement('script'); + script.textContent = `${code}window.Date.now = () => new Date(Date.UTC(2018, 10, 15, 8)).valueOf();${recordSnippet}`; + document.head.appendChild(script); + }, + code, + generateRecordSnippet({}), + ); + + await page.evaluate( + async (OldColor, NewColor) => { + // Create a new style element with the same content as the existing style element and apply it to the #two div element + const incrementalStyle = document.createElement( + 'style', + ) as HTMLStyleElement; + incrementalStyle.textContent = ` \n`; + document.head.appendChild(incrementalStyle); + incrementalStyle.sheet!.insertRule(`#two { color: ${OldColor}; }`, 0); + + await new Promise((resolve) => + requestAnimationFrame(() => { + requestAnimationFrame(resolve); + }), + ); + + // Change the color of the #one div element to yellow as an incremental style mutation + const styleElement = document.querySelector('style')!; + (styleElement.sheet!.cssRules[0] as any).style.setProperty( + 'color', + NewColor, + ); + // Change the color of the #two div element to yellow as an incremental style mutation + (incrementalStyle.sheet!.cssRules[0] as any).style.setProperty( + 'color', + NewColor, + ); + }, + OldColor, + NewColor, + ); + await waitForRAF(page); + + const snapshots = (await page.evaluate( + 'window.snapshots', + )) as eventWithTime[]; + await assertSnapshot(snapshots); + + /** + * Replay the recorded events and check if the style mutation is applied correctly + */ + const changedColors = await page.evaluate(` + const { Replayer } = rrweb; + const replayer = new Replayer(window.snapshots); + replayer.pause(1000); + + // Get the color of the element after applying the style mutation event + [ + window.getComputedStyle( + replayer.iframe.contentDocument.querySelector('#one'), + ).color, + window.getComputedStyle( + replayer.iframe.contentDocument.querySelector('#two'), + ).color, + ]; + `); + expect(changedColors).toEqual([NewColor, NewColor]); + await page.close(); + }); + + it('should record style mutations with multiple child nodes and replay them correctly', async () => { + // ensure that presence of multiple text nodes doesn't interfere with programmatic insertRule operations + + const page: puppeteer.Page = await browser.newPage(); + const Color = 'rgb(255, 0, 0)'; // red color + + await page.setContent( + ` + + + + + +
+
+ + + `, + ); + // Start rrweb recording + await page.evaluate( + (code, recordSnippet) => { + const script = document.createElement('script'); + script.textContent = `${code};${recordSnippet}`; + document.head.appendChild(script); + }, + code, + generateRecordSnippet({}), + ); + + await page.evaluate(async (Color) => { + // Create a new style element with the same content as the existing style element and apply it to the #two div element + const incrementalStyle = document.createElement( + 'style', + ) as HTMLStyleElement; + incrementalStyle.append(document.createTextNode('/* hello */')); + incrementalStyle.append(document.createTextNode('/* world */')); + document.head.appendChild(incrementalStyle); + incrementalStyle.sheet!.insertRule(`#two { color: ${Color}; }`, 0); + }, Color); + + const snapshots = (await page.evaluate( + 'window.snapshots', + )) as eventWithTime[]; + await assertSnapshot(snapshots); + + /** + * Replay the recorded events and check if the style mutation is applied correctly + */ + const changedColors = await page.evaluate(` + const { Replayer } = rrweb; + const replayer = new Replayer(window.snapshots); + replayer.pause(1000); + + // Get the color of the element after applying the style mutation event + [ + window.getComputedStyle( + replayer.iframe.contentDocument.querySelector('#one'), + ).color, + window.getComputedStyle( + replayer.iframe.contentDocument.querySelector('#two'), + ).color, + ]; + `); + expect(changedColors).toEqual([Color, Color]); + await page.close(); }); }); diff --git a/packages/rrweb/test/record.test.ts b/packages/rrweb/test/record.test.ts index d35dd6f6a2..72a8a7fbe8 100644 --- a/packages/rrweb/test/record.test.ts +++ b/packages/rrweb/test/record.test.ts @@ -206,7 +206,7 @@ describe('record', function (this: ISuite) { }, 10); }); await ctx.page.waitForTimeout(100); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); it('should record scroll position', async () => { @@ -223,7 +223,7 @@ describe('record', function (this: ISuite) { p.scrollLeft = 10; }); await waitForRAF(ctx.page); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); it('should record selection event', async () => { @@ -279,7 +279,7 @@ describe('record', function (this: ISuite) { }); }); await ctx.page.waitForTimeout(50); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); it('captures stylesheet rules', async () => { @@ -297,6 +297,7 @@ describe('record', function (this: ISuite) { // begin: pre-serialization const ruleIdx0 = styleSheet.insertRule('body { background: #000; }'); const ruleIdx1 = styleSheet.insertRule('body { background: #111; }'); + styleSheet.deleteRule(ruleIdx1); // end: pre-serialization setTimeout(() => { @@ -328,8 +329,71 @@ describe('record', function (this: ISuite) { rule: 'body { color: #fff; }', }, ]); + expect((addRules[1].data as styleSheetRuleData).adds).toEqual([ + { + rule: 'body { color: #ccc; }', + }, + ]); + expect(removeRuleCount).toEqual(1); + await assertSnapshot(ctx.events); + }); + + it('captures stylesheet rules with deprecated addRule & removeRule properties', async () => { + await ctx.page.evaluate(() => { + const { record } = (window as unknown as IWindow).rrweb; + + record({ + emit: (window as unknown as IWindow).emit, + }); + + const styleElement = document.createElement('style'); + document.head.appendChild(styleElement); + + const styleSheet = styleElement.sheet; + // begin: pre-serialization + const ruleIdx0 = styleSheet.addRule('body', 'background: #000;'); + const ruleIdx1 = styleSheet.addRule('body', 'background: #111;'); + + styleSheet.removeRule(ruleIdx1); + // end: pre-serialization + setTimeout(() => { + styleSheet.addRule('body', 'color: #fff;'); + }, 0); + setTimeout(() => { + styleSheet.removeRule(ruleIdx0); + }, 5); + setTimeout(() => { + styleSheet.addRule('body', 'color: #ccc;'); + }, 10); + }); + await ctx.page.waitForTimeout(50); + const styleSheetRuleEvents = ctx.events.filter( + (e) => + e.type === EventType.IncrementalSnapshot && + e.data.source === IncrementalSource.StyleSheetRule, + ); + const addRules = styleSheetRuleEvents.filter((e) => + Boolean((e.data as styleSheetRuleData).adds), + ); + const removeRuleCount = styleSheetRuleEvents.filter((e) => + Boolean((e.data as styleSheetRuleData).removes), + ).length; + // pre-serialization insert/delete should be ignored + expect(addRules.length).toEqual(2); + expect((addRules[0].data as styleSheetRuleData).adds).toEqual([ + { + index: 1, + rule: 'body { color: #fff; }', + }, + ]); + expect((addRules[1].data as styleSheetRuleData).adds).toEqual([ + { + index: 1, + rule: 'body { color: #ccc; }', + }, + ]); expect(removeRuleCount).toEqual(1); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); const captureNestedStylesheetRulesTest = async () => { @@ -375,7 +439,7 @@ describe('record', function (this: ISuite) { // sync insert/delete should be ignored expect(addRuleCount).toEqual(2); expect(removeRuleCount).toEqual(1); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }; it('captures nested stylesheet rules', captureNestedStylesheetRulesTest); @@ -426,7 +490,7 @@ describe('record', function (this: ISuite) { }, 0); }); await ctx.page.waitForTimeout(50); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); it('captures inserted style text nodes correctly', async () => { @@ -446,7 +510,7 @@ describe('record', function (this: ISuite) { styleEl.append(document.createTextNode('h1 { color: pink; }')); }); await waitForRAF(ctx.page); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); it('captures stylesheets with `blob:` url', async () => { @@ -473,7 +537,7 @@ describe('record', function (this: ISuite) { }); }); await waitForRAF(ctx.page); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); it('captures mutations on adopted stylesheets', async () => { @@ -538,7 +602,7 @@ describe('record', function (this: ISuite) { }); }); await waitForRAF(ctx.page); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); it('captures adopted stylesheets in nested shadow doms and iframes', async () => { @@ -590,7 +654,7 @@ describe('record', function (this: ISuite) { }, 150); }); await ctx.page.waitForTimeout(200); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); it('captures adopted stylesheets of shadow doms in checkout full snapshot', async () => { @@ -619,7 +683,7 @@ describe('record', function (this: ISuite) { }); }); await waitForRAF(ctx.page); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); it('captures stylesheets in iframes with `blob:` url', async () => { @@ -651,7 +715,7 @@ describe('record', function (this: ISuite) { }); }); await waitForRAF(ctx.page); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); it('aggregates mutations', async () => { @@ -698,7 +762,7 @@ describe('record', function (this: ISuite) { ); expect(mutationEvents.length).toEqual(0); // there was no aggregate effect - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); it('no need for attribute mutations on adds', async () => { @@ -737,7 +801,7 @@ describe('record', function (this: ISuite) { ); expect(mutationEvents.length).toEqual(1); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); describe('loading stylesheets', () => { @@ -789,7 +853,7 @@ describe('record', function (this: ISuite) { await ctx.page.waitForResponse(`${serverURL}/html/assets/style.css`); await waitForRAF(ctx.page); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); it('captures stylesheets in iframes that are still loading', async () => { @@ -823,7 +887,7 @@ describe('record', function (this: ISuite) { await waitForRAF(ctx.page); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); }); @@ -849,7 +913,7 @@ describe('record', function (this: ISuite) { await ctx.page.waitForResponse(corsStylesheetURL); // wait for stylesheet to be loaded await waitForRAF(ctx.page); // wait for rrweb to emit events - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); it('captures adopted stylesheets in shadow doms and iframe', async () => { @@ -924,7 +988,7 @@ describe('record', function (this: ISuite) { }); await waitForRAF(ctx.page); // wait till events get sent - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); }); @@ -1025,6 +1089,6 @@ describe('record iframes', function (this: ISuite) { expect(styleRelatedEvents.length).toEqual(5); expect(addRuleCount).toEqual(2); expect(removeRuleCount).toEqual(2); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); }); diff --git a/packages/rrweb/test/record/__snapshots__/dialog.test.ts.snap b/packages/rrweb/test/record/__snapshots__/dialog.test.ts.snap new file mode 100644 index 0000000000..03526f8c0f --- /dev/null +++ b/packages/rrweb/test/record/__snapshots__/dialog.test.ts.snap @@ -0,0 +1,487 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`dialog > add dialog and show 1`] = ` +"[ + { + \\"type\\": 4, + \\"data\\": { + \\"href\\": \\"about:blank\\", + \\"width\\": 1920, + \\"height\\": 1080 + } + }, + { + \\"type\\": 2, + \\"data\\": { + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": { + \\"type\\": \\"text/javascript\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 5 + } + ], + \\"id\\": 4 + } + ], + \\"id\\": 3 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 7 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"dialog\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"I'm a dialog\\", + \\"id\\": 9 + } + ], + \\"id\\": 8 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n\\\\n\\", + \\"id\\": 10 + } + ], + \\"id\\": 6 + } + ], + \\"id\\": 2 + } + ], + \\"compatMode\\": \\"BackCompat\\", + \\"id\\": 1 + }, + \\"initialOffset\\": { + \\"left\\": 0, + \\"top\\": 0 + } + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [], + \\"removes\\": [], + \\"adds\\": [ + { + \\"parentId\\": 6, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"dialog\\", + \\"attributes\\": { + \\"open\\": \\"\\", + \\"rr_open_mode\\": \\"non-modal\\" + }, + \\"childNodes\\": [], + \\"id\\": 11 + } + } + ] + } + } +]" +`; + +exports[`dialog > add dialog and showModal 1`] = ` +"[ + { + \\"type\\": 4, + \\"data\\": { + \\"href\\": \\"about:blank\\", + \\"width\\": 1920, + \\"height\\": 1080 + } + }, + { + \\"type\\": 2, + \\"data\\": { + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": { + \\"type\\": \\"text/javascript\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 5 + } + ], + \\"id\\": 4 + } + ], + \\"id\\": 3 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 7 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"dialog\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"I'm a dialog\\", + \\"id\\": 9 + } + ], + \\"id\\": 8 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n\\\\n\\", + \\"id\\": 10 + } + ], + \\"id\\": 6 + } + ], + \\"id\\": 2 + } + ], + \\"compatMode\\": \\"BackCompat\\", + \\"id\\": 1 + }, + \\"initialOffset\\": { + \\"left\\": 0, + \\"top\\": 0 + } + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [], + \\"removes\\": [], + \\"adds\\": [ + { + \\"parentId\\": 6, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"dialog\\", + \\"attributes\\": { + \\"open\\": \\"\\", + \\"rr_open_mode\\": \\"modal\\" + }, + \\"childNodes\\": [], + \\"id\\": 11 + } + } + ] + } + } +]" +`; + +exports[`dialog > switch to show dialog 1`] = ` +"[ + { + \\"type\\": 4, + \\"data\\": { + \\"href\\": \\"about:blank\\", + \\"width\\": 1920, + \\"height\\": 1080 + } + }, + { + \\"type\\": 2, + \\"data\\": { + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": { + \\"type\\": \\"text/javascript\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 5 + } + ], + \\"id\\": 4 + } + ], + \\"id\\": 3 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 7 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"dialog\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"I'm a dialog\\", + \\"id\\": 9 + } + ], + \\"id\\": 8 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n\\\\n\\", + \\"id\\": 10 + } + ], + \\"id\\": 6 + } + ], + \\"id\\": 2 + } + ], + \\"compatMode\\": \\"BackCompat\\", + \\"id\\": 1 + }, + \\"initialOffset\\": { + \\"left\\": 0, + \\"top\\": 0 + } + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [ + { + \\"id\\": 8, + \\"attributes\\": { + \\"open\\": \\"\\", + \\"rr_open_mode\\": \\"modal\\" + } + } + ], + \\"removes\\": [], + \\"adds\\": [] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [ + { + \\"id\\": 8, + \\"attributes\\": { + \\"open\\": \\"\\", + \\"rr_open_mode\\": \\"non-modal\\" + } + } + ], + \\"removes\\": [], + \\"adds\\": [] + } + } +]" +`; + +exports[`dialog > switch to showModal dialog 1`] = ` +"[ + { + \\"type\\": 4, + \\"data\\": { + \\"href\\": \\"about:blank\\", + \\"width\\": 1920, + \\"height\\": 1080 + } + }, + { + \\"type\\": 2, + \\"data\\": { + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": { + \\"type\\": \\"text/javascript\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 5 + } + ], + \\"id\\": 4 + } + ], + \\"id\\": 3 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 7 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"dialog\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"I'm a dialog\\", + \\"id\\": 9 + } + ], + \\"id\\": 8 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n\\\\n\\", + \\"id\\": 10 + } + ], + \\"id\\": 6 + } + ], + \\"id\\": 2 + } + ], + \\"compatMode\\": \\"BackCompat\\", + \\"id\\": 1 + }, + \\"initialOffset\\": { + \\"left\\": 0, + \\"top\\": 0 + } + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [ + { + \\"id\\": 8, + \\"attributes\\": { + \\"open\\": \\"\\", + \\"rr_open_mode\\": \\"non-modal\\" + } + } + ], + \\"removes\\": [], + \\"adds\\": [] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [ + { + \\"id\\": 8, + \\"attributes\\": { + \\"open\\": \\"\\", + \\"rr_open_mode\\": \\"modal\\" + } + } + ], + \\"removes\\": [], + \\"adds\\": [] + } + } +]" +`; diff --git a/packages/rrweb/test/record/cross-origin-iframes.test.ts b/packages/rrweb/test/record/cross-origin-iframes.test.ts index 2cdf69f006..32aa4644eb 100644 --- a/packages/rrweb/test/record/cross-origin-iframes.test.ts +++ b/packages/rrweb/test/record/cross-origin-iframes.test.ts @@ -53,7 +53,11 @@ async function injectRecordScript( } catch (e) { // we get this error: `Protocol error (DOM.resolveNode): Node with given id does not belong to the document` // then the page wasn't loaded yet and we try again - if (!e.message.includes('DOM.resolveNode')) throw e; + if ( + !e.message.includes('DOM.resolveNode') || + !e.message.includes('DOM.describeNode') + ) + throw e; await injectRecordScript(frame, options); return; } @@ -238,7 +242,7 @@ describe('cross origin iframes', function (this: ISuite) { const snapshots = (await ctx.page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should map scroll events correctly', async () => { @@ -261,7 +265,7 @@ describe('cross origin iframes', function (this: ISuite) { const snapshots = (await ctx.page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); }); @@ -289,7 +293,7 @@ describe('cross origin iframes', function (this: ISuite) { const snapshots = (await ctx.page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should record DOM node removal', async () => { @@ -301,7 +305,7 @@ describe('cross origin iframes', function (this: ISuite) { const snapshots = (await ctx.page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should record DOM attribute changes', async () => { @@ -313,7 +317,7 @@ describe('cross origin iframes', function (this: ISuite) { const snapshots = (await ctx.page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should record DOM text changes', async () => { @@ -325,7 +329,7 @@ describe('cross origin iframes', function (this: ISuite) { const snapshots = (await ctx.page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should record canvas elements', async () => { @@ -342,7 +346,7 @@ describe('cross origin iframes', function (this: ISuite) { const snapshots = (await ctx.page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should record custom events', async () => { @@ -358,7 +362,7 @@ describe('cross origin iframes', function (this: ISuite) { const snapshots = (await ctx.page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('captures mutations on adopted stylesheets', async () => { @@ -421,7 +425,7 @@ describe('cross origin iframes', function (this: ISuite) { const snapshots = (await ctx.page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('captures mutations on stylesheets', async () => { @@ -476,7 +480,7 @@ describe('cross origin iframes', function (this: ISuite) { const snapshots = (await ctx.page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); }); @@ -505,7 +509,7 @@ describe('cross origin iframes', function (this: ISuite) { const snapshots = (await ctx.page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); }); @@ -537,7 +541,7 @@ describe('cross origin iframes', function (this: ISuite) { const snapshots = (await ctx.page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); it('should filter out forwarded cross origin rrweb messages', async () => { @@ -564,7 +568,7 @@ describe('cross origin iframes', function (this: ISuite) { const snapshots = (await ctx.page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); }); }); @@ -592,7 +596,7 @@ describe('same origin iframes', function (this: ISuite) { // two events (full snapshot + meta) from main frame, // and two (full snapshot + mutation) from iframe expect(events.length).toBe(4); - assertSnapshot(events); + await assertSnapshot(events); }); it('should record cross-origin iframe in same-origin iframe', async () => { @@ -616,6 +620,6 @@ describe('same origin iframes', function (this: ISuite) { const snapshots = (await ctx.page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots); + await assertSnapshot(snapshots); }); }); diff --git a/packages/rrweb/test/record/dialog.test.ts b/packages/rrweb/test/record/dialog.test.ts new file mode 100644 index 0000000000..ab6542b547 --- /dev/null +++ b/packages/rrweb/test/record/dialog.test.ts @@ -0,0 +1,229 @@ +import * as fs from 'fs'; +import * as path from 'path'; +import { vi } from 'vitest'; + +import { + assertSnapshot, + getServerURL, + ISuite, + launchPuppeteer, + startServer, + waitForRAF, +} from '../utils'; +import { + attributeMutation, + EventType, + eventWithTime, + listenerHandler, +} from '@rrweb/types'; +import { recordOptions } from '../../src/types'; + +interface IWindow extends Window { + rrweb: { + record: ( + options: recordOptions, + ) => listenerHandler | undefined; + addCustomEvent(tag: string, payload: T): void; + }; + emit: (e: eventWithTime) => undefined; +} + +const attributeMutationFactory = ( + mutation: attributeMutation['attributes'], +) => { + return { + data: { + attributes: [ + { + attributes: mutation, + }, + ], + }, + }; +}; + +describe('dialog', () => { + vi.setConfig({ testTimeout: 100_000 }); + let code: ISuite['code']; + let page: ISuite['page']; + let browser: ISuite['browser']; + let server: ISuite['server']; + let serverURL: ISuite['serverURL']; + let events: ISuite['events']; + + beforeAll(async () => { + server = await startServer(); + serverURL = getServerURL(server); + browser = await launchPuppeteer(); + + const bundlePath = path.resolve(__dirname, '../../dist/rrweb.umd.cjs'); + code = fs.readFileSync(bundlePath, 'utf8'); + }); + + afterEach(async () => { + await page.close(); + }); + + afterAll(async () => { + await server.close(); + await browser.close(); + }); + + beforeEach(async () => { + page = await browser.newPage(); + page.on('console', (msg) => { + console.log(msg.text()); + }); + + await page.goto(`${serverURL}/html/dialog.html`); + await page.addScriptTag({ + path: path.resolve(__dirname, '../../dist/rrweb.umd.cjs'), + }); + await waitForRAF(page); + events = []; + + await page.exposeFunction('emit', (e: eventWithTime) => { + if (e.type === EventType.DomContentLoaded || e.type === EventType.Load) { + return; + } + events.push(e); + }); + + page.on('console', (msg) => console.log('PAGE LOG:', msg.text())); + + await page.evaluate(() => { + const { record } = (window as unknown as IWindow).rrweb; + record({ + emit: (window as unknown as IWindow).emit, + }); + }); + + await waitForRAF(page); + }); + + it('show dialog', async () => { + await page.evaluate(() => { + const dialog = document.querySelector('dialog') as HTMLDialogElement; + dialog.show(); + }); + + const lastEvent = events[events.length - 1]; + + expect(lastEvent).toMatchObject(attributeMutationFactory({ open: '' })); + // assertSnapshot(events); + }); + + it('showModal dialog', async () => { + await page.evaluate(() => { + const dialog = document.querySelector('dialog') as HTMLDialogElement; + dialog.showModal(); + }); + + const lastEvent = events[events.length - 1]; + + expect(lastEvent).toMatchObject( + attributeMutationFactory({ rr_open_mode: 'modal' }), + ); + }); + + it('showModal & close dialog', async () => { + await page.evaluate(() => { + const dialog = document.querySelector('dialog') as HTMLDialogElement; + dialog.showModal(); + }); + await waitForRAF(page); + await page.evaluate(() => { + const dialog = document.querySelector('dialog') as HTMLDialogElement; + dialog.close(); + }); + + const lastEvent = events[events.length - 1]; + + expect(lastEvent).toMatchObject(attributeMutationFactory({ open: null })); + }); + + it('show & close dialog', async () => { + await page.evaluate(() => { + const dialog = document.querySelector('dialog') as HTMLDialogElement; + dialog.show(); + }); + await waitForRAF(page); + await page.evaluate(() => { + const dialog = document.querySelector('dialog') as HTMLDialogElement; + dialog.close(); + }); + + const lastEvent = events[events.length - 1]; + + expect(lastEvent).toMatchObject(attributeMutationFactory({ open: null })); + }); + + it('switch to showModal dialog', async () => { + await page.evaluate(() => { + const dialog = document.querySelector('dialog') as HTMLDialogElement; + dialog.show(); + }); + await waitForRAF(page); + await page.evaluate(() => { + const dialog = document.querySelector('dialog') as HTMLDialogElement; + dialog.close(); + dialog.showModal(); + }); + + await assertSnapshot(events); + }); + + it('switch to show dialog', async () => { + await page.evaluate(() => { + const dialog = document.querySelector('dialog') as HTMLDialogElement; + dialog.showModal(); + }); + await waitForRAF(page); + await page.evaluate(() => { + const dialog = document.querySelector('dialog') as HTMLDialogElement; + dialog.close(); + dialog.show(); + }); + + await assertSnapshot(events); + }); + + it('add dialog and showModal', async () => { + await page.evaluate(() => { + const dialog = document.createElement('dialog') as HTMLDialogElement; + document.body.appendChild(dialog); + dialog.showModal(); + }); + await waitForRAF(page); + + await assertSnapshot(events); + }); + + it('add dialog and show', async () => { + await page.evaluate(() => { + const dialog = document.createElement('dialog') as HTMLDialogElement; + document.body.appendChild(dialog); + dialog.show(); + }); + await waitForRAF(page); + + await assertSnapshot(events); + }); + + // TODO: implement me in the future + it.skip('should record playback order with multiple dialogs opening', async () => { + await page.evaluate(() => { + const dialog1 = document.createElement('dialog') as HTMLDialogElement; + dialog1.className = 'dialog1'; + document.body.appendChild(dialog1); + const dialog2 = document.createElement('dialog') as HTMLDialogElement; + dialog1.className = 'dialog2'; + document.body.appendChild(dialog2); + dialog2.showModal(); // <== Note that dialog TWO is being triggered first + dialog1.showModal(); + }); + + await waitForRAF(page); + await assertSnapshot(events); // <== This should trigger showModal() on dialog2 first, then dialog1 + }); +}); diff --git a/packages/rrweb/test/record/webgl.test.ts b/packages/rrweb/test/record/webgl.test.ts index c19023732a..87999c458f 100644 --- a/packages/rrweb/test/record/webgl.test.ts +++ b/packages/rrweb/test/record/webgl.test.ts @@ -124,7 +124,7 @@ describe('record webgl', function (this: ISuite) { ], }, }); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); it('will record changes to a webgl2 canvas element', async () => { @@ -150,7 +150,7 @@ describe('record webgl', function (this: ISuite) { ], }, }); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); it('will record changes to a canvas element before the canvas gets added', async () => { @@ -165,7 +165,7 @@ describe('record webgl', function (this: ISuite) { await waitForRAF(ctx.page); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); it('will record changes to a canvas element before the canvas gets added (webgl2)', async () => { @@ -188,7 +188,7 @@ describe('record webgl', function (this: ISuite) { // we need to change this await waitForRAF(ctx.page); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); it('will record webgl variables', async () => { @@ -203,7 +203,7 @@ describe('record webgl', function (this: ISuite) { await ctx.page.waitForTimeout(50); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); it('will record webgl variables in reverse order', async () => { @@ -219,7 +219,7 @@ describe('record webgl', function (this: ISuite) { await ctx.page.waitForTimeout(50); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); }); it('sets _context on canvas.getContext()', async () => { @@ -264,7 +264,7 @@ describe('record webgl', function (this: ISuite) { await ctx.page.waitForTimeout(50); - assertSnapshot(ctx.events); + await assertSnapshot(ctx.events); expect(ctx.events.length).toEqual(5); }); @@ -312,7 +312,7 @@ describe('record webgl', function (this: ISuite) { await waitForRAF(ctx.page); // should yield a frame for each change at a max of 60fps - assertSnapshot(stripBase64(ctx.events)); + await assertSnapshot(stripBase64(ctx.events)); }); }); }); diff --git a/packages/rrweb/test/replay/__image_snapshots__/dialog-test-ts-test-replay-dialog-test-ts-dialog-closed-dialogs-show-nothing-1-snap.png b/packages/rrweb/test/replay/__image_snapshots__/dialog-test-ts-test-replay-dialog-test-ts-dialog-closed-dialogs-show-nothing-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..9fb34401f4292e123559cdb06cd35f8842b1c146 GIT binary patch literal 10592 zcmeHNJxjw-6g{b-wxyAXOB986aqi$y@T|9VC|KJ$zW#XbJF4QUo5$~?m8*syeA$D&`@0i;T-MTOZ_ZRu z)A^by8!fABDt8xSrV2b|3QY2tAVEMfK9C_943ta;1Dk_^fz5%osrx2B4}1iBog23c$HZdmv+h_F#1FLD;RX z0>ugW7hrU6$(zw$2?DfN8UxxZ+AGll?G^2n@PPK}zwJRT?3MRl>hVC}jW(J=$4}0F E0Mb(D%HLOWaU07rnLQrBNgph=gr1vH>p6UEM|9E=dJvrxn@7??E`_|w6 z?sxOeVLxBvH#WS1Ac!&kfX}B0Vwi~_E8JGE0#BwNw(SF#Wu#Ai_aaq1i)RS35yAWH z`FjdYG@Rb?I9c63+t*kl_-)V4D7oq8I*cog(-g$*IubKrt=`1BIL(<}Ykd5+-M3CB zYwC}=H92niI*fJ7(6OTsx8e4&!J7BpTUQco{-7{c(DiAhfGbn&Yswgyf3T}>mYL?M zG2tmg=~8duXa${5td8t1>;$}k_P3xrr^l;(5wmY^f4)}#2w`__LJahD{@a<$^wh_z z+5hg|x*|+ZWv*N9pr>}PS!SlE{&f*C(o=``B2aA5-bbfn>lA??sP0flL8C$+3@D_`Dtr|8?EUI?*y*+jCd1j++QunI zf=PX+g>Hw^ChnU0si$CXg*)6f?&q>Bu6ts!zY#yo&1~DPTnT#iclTEt!uJafon(V6 zd$kFySlnkKfQHsf)1w4G}#R5BkZ4UZ;`RO-U1q*ipf0-a9ruTmlM(fCqvZyMZ_$?OUg#zI8cuS33L`$y zqMRy~J}7G4d7*71_%YH1+iO#1pE6~);<$Bvp{0XyEOh`yI#&vffM727G6QPVWPN7}MHGalI zEuNapoUl~R=2B>br=8z28BVL@`%ep(gHO_ai84wB*RVU~ zv)M!pK8i=f%AV8$l?0QxyU25SbQ;i1)M#sZqh@g?55pjHqpvjaG-{P|I49d^m6j4U z$Es2uvvfc6et7spE&VY|{UWYW+%z-ygN@e*_?no3nx&UnxU^upN;0$z?qagnL3?C| zFZQ>47uNFJw-dCBeR&q%z2wKgd`9j*G2$fa>AiKLHbKx89Do1a_14z>McGV6h*XHv zl1CIA*QnX2_k*g#_IS&F_P2~rmVm+1nxYn421PyNOwlYcRl^cq1y21eX0%lu5WOS# z≷|;!zgP+$E-?sCE8F8hNV3W@5%B-Vm;y4##0eJysmmQ+)MJyE_{xio4bcqv`TU zAhdF!fmP;}x^U1-THnyJgGh_t-^(D-6K8q_Et2#&jYiJ0PHcHG*g*XK`;SVBi#uW) zh6|0&T_*QgFCN~uZQG6Vpt_Tv71|TZPsFwC`lQH?3(P050Lt=De;$~N72Y^hnlM5Z zMoOo+%Eye1f=>Kk5_HywdC=<)&S3duKk8%yOC4+1I7ziVRz3E$+`d^Z)27pZAn`xE2K`;Hh`zE9}95J_02@L#rAUmZyq4Et7|?LRZ66U0a?V z!c&z}p>U;rN}D6m!e~`cV?tyUzq}0CdMcWrdNQHl0L>uRArK)qWS0p`oAGnhBIe{z z5<=>WIxKKzXrG@`&*#<|C~R;_{8Uc~>0UG=Lv}L{Ggu$n{jhxDS4>v!H9u-C-`k^e z{Car>>DiA(QD1zqIe9qoC^ce&lhdvawdt~CgAcLaFL4w>xdZ#e!_6f5aI#Rzr(^(@ z(jO5|-5I}>_VgWk$Bu>}s-bn7L&H!)w_~5j>9O4z%5H+y>=UJsj+2czgZN--)e^ob zOL3nmPGod*a?G6_9j^+#<&8EwB??8#$jeKvdH{2aT?0PM4zTo0agdztYo=m=cep)w z_DB}@4326RDhVual90#cm3dTzklN0#YDlVS?&of~-=; z&Uq@vE-0scac6&hi#K=p{(o+JcvDVi#cgZ~MA#t^62Q)nAR#bD1&AMULT%DZ)`;Dx?$$5uuzDG|qC&Nm{jB zm`7iV5Z{@&!jz;-x|!5)W%*8geE8nzb^t#l1P{MHj#m(ir<(nnp_Z zr)KBm2xuf;=etLPj0BX;(1DYY(%cG z5bsuCTpu&=G{F{#vxzl0UjSB6?Dne0nf%6?B!0OUcBZnHiqR_CaZUifvU4m|?C*T7 z$e85O^knG&M6a2kKt>#h{O50t4L2tf0Yz4fXGzbkP1{)N5_`?vWpNazVxKd>szkN^ zi}DRdtCXB9`<}`mMu*fcRfs28BS^|qTYx$JTM(nKpm(z;7Wj%%3;+*KJe|@NSWcDl zaoPX|L+S{Fh-6l`lhW`4G-yJ2(HGOqU#>1u*)lyR6?X}=&Y}LEHc zpdq7E!(RzQMER#K0Z=5s{{ojB++>-2!)wN4G_-di6PXkkvLhyMkK(}T4J>p@TE9!;-Y z@$nWwZd(D5;y`0xL}2Y3wBonfx+{Xbvm722gBG?IoKWc6!PQ}UB6E%IP!ZfXZ2HeX f@X^WsAD#JJu83GgI51ua6^#GL&!=i{*!e#Itmd7) literal 0 HcmV?d00001 diff --git a/packages/rrweb/test/replay/__image_snapshots__/dialog-test-ts-test-replay-dialog-test-ts-dialog-should-add-an-opened-dialog-with-show-modal-in-incremental-snapshot.png b/packages/rrweb/test/replay/__image_snapshots__/dialog-test-ts-test-replay-dialog-test-ts-dialog-should-add-an-opened-dialog-with-show-modal-in-incremental-snapshot.png new file mode 100644 index 0000000000000000000000000000000000000000..f328c34b5b1b95a917d80f69c2fa391285891f97 GIT binary patch literal 12721 zcmeHNc~nzZ8h?t4wor?m7L?5;N?Vatfw0AeifI+3OjQ&JElZ{XB1D$R5?m^61sTIG zflO;FZAF4mKp>D%HLOWaU07rnLQrBNgph=gr1vH>p6UEM|9E=dJvrxn@7??E`_|w6 z?sxOeVLxBvH#WS1Ac!&kfX}B0Vwi~_E8JGE0#BwNw(SF#Wu#Ai_aaq1i)RS35yAWH z`FjdYG@Rb?I9c63+t*kl_-)V4D7oq8I*cog(-g$*IubKrt=`1BIL(<}Ykd5+-M3CB zYwC}=H92niI*fJ7(6OTsx8e4&!J7BpTUQco{-7{c(DiAhfGbn&Yswgyf3T}>mYL?M zG2tmg=~8duXa${5td8t1>;$}k_P3xrr^l;(5wmY^f4)}#2w`__LJahD{@a<$^wh_z z+5hg|x*|+ZWv*N9pr>}PS!SlE{&f*C(o=``B2aA5-bbfn>lA??sP0flL8C$+3@D_`Dtr|8?EUI?*y*+jCd1j++QunI zf=PX+g>Hw^ChnU0si$CXg*)6f?&q>Bu6ts!zY#yo&1~DPTnT#iclTEt!uJafon(V6 zd$kFySlnkKfQHsf)1w4G}#R5BkZ4UZ;`RO-U1q*ipf0-a9ruTmlM(fCqvZyMZ_$?OUg#zI8cuS33L`$y zqMRy~J}7G4d7*71_%YH1+iO#1pE6~);<$Bvp{0XyEOh`yI#&vffM727G6QPVWPN7}MHGalI zEuNapoUl~R=2B>br=8z28BVL@`%ep(gHO_ai84wB*RVU~ zv)M!pK8i=f%AV8$l?0QxyU25SbQ;i1)M#sZqh@g?55pjHqpvjaG-{P|I49d^m6j4U z$Es2uvvfc6et7spE&VY|{UWYW+%z-ygN@e*_?no3nx&UnxU^upN;0$z?qagnL3?C| zFZQ>47uNFJw-dCBeR&q%z2wKgd`9j*G2$fa>AiKLHbKx89Do1a_14z>McGV6h*XHv zl1CIA*QnX2_k*g#_IS&F_P2~rmVm+1nxYn421PyNOwlYcRl^cq1y21eX0%lu5WOS# z≷|;!zgP+$E-?sCE8F8hNV3W@5%B-Vm;y4##0eJysmmQ+)MJyE_{xio4bcqv`TU zAhdF!fmP;}x^U1-THnyJgGh_t-^(D-6K8q_Et2#&jYiJ0PHcHG*g*XK`;SVBi#uW) zh6|0&T_*QgFCN~uZQG6Vpt_Tv71|TZPsFwC`lQH?3(P050Lt=De;$~N72Y^hnlM5Z zMoOo+%Eye1f=>Kk5_HywdC=<)&S3duKk8%yOC4+1I7ziVRz3E$+`d^Z)27pZAn`xE2K`;Hh`zE9}95J_02@L#rAUmZyq4Et7|?LRZ66U0a?V z!c&z}p>U;rN}D6m!e~`cV?tyUzq}0CdMcWrdNQHl0L>uRArK)qWS0p`oAGnhBIe{z z5<=>WIxKKzXrG@`&*#<|C~R;_{8Uc~>0UG=Lv}L{Ggu$n{jhxDS4>v!H9u-C-`k^e z{Car>>DiA(QD1zqIe9qoC^ce&lhdvawdt~CgAcLaFL4w>xdZ#e!_6f5aI#Rzr(^(@ z(jO5|-5I}>_VgWk$Bu>}s-bn7L&H!)w_~5j>9O4z%5H+y>=UJsj+2czgZN--)e^ob zOL3nmPGod*a?G6_9j^+#<&8EwB??8#$jeKvdH{2aT?0PM4zTo0agdztYo=m=cep)w z_DB}@4326RDhVual90#cm3dTzklN0#YDlVS?&of~-=; z&Uq@vE-0scac6&hi#K=p{(o+JcvDVi#cgZ~MA#t^62Q)nAR#bD1&AMULT%DZ)`;Dx?$$5uuzDG|qC&Nm{jB zm`7iV5Z{@&!jz;-x|!5)W%*8geE8nzb^t#l1P{MHj#m(ir<(nnp_Z zr)KBm2xuf;=etLPj0BX;(1DYY(%cG z5bsuCTpu&=G{F{#vxzl0UjSB6?Dne0nf%6?B!0OUcBZnHiqR_CaZUifvU4m|?C*T7 z$e85O^knG&M6a2kKt>#h{O50t4L2tf0Yz4fXGzbkP1{)N5_`?vWpNazVxKd>szkN^ zi}DRdtCXB9`<}`mMu*fcRfs28BS^|qTYx$JTM(nKpm(z;7Wj%%3;+*KJe|@NSWcDl zaoPX|L+S{Fh-6l`lhW`4G-yJ2(HGOqU#>1u*)lyR6?X}=&Y}LEHc zpdq7E!(RzQMER#K0Z=5s{{ojB++>-2!)wN4G_-di6PXkkvLhyMkK(}T4J>p@TE9!;-Y z@$nWwZd(D5;y`0xL}2Y3wBonfx+{Xbvm722gBG?IoKWc6!PQ}UB6E%IP!ZfXZ2HeX f@X^WsAD#JJu83GgI51ua6^#GL&!=i{*!e#Itmd7) literal 0 HcmV?d00001 diff --git a/packages/rrweb/test/replay/__image_snapshots__/dialog-test-ts-test-replay-dialog-test-ts-dialog-should-close-dialog-again-when-open-attribute-gets-removed.png b/packages/rrweb/test/replay/__image_snapshots__/dialog-test-ts-test-replay-dialog-test-ts-dialog-should-close-dialog-again-when-open-attribute-gets-removed.png new file mode 100644 index 0000000000000000000000000000000000000000..9fb34401f4292e123559cdb06cd35f8842b1c146 GIT binary patch literal 10592 zcmeHNJxjw-6g{b-wxyAXOB986aqi$y@T|9VC|KJ$zW#XbJF4QUo5$~?m8*syeA$D&`@0i;T-MTOZ_ZRu z)A^by8!fABDt8xSrV2b|3QY2tAVEMfK9C_943ta;1Dk_^fz5%osrx2B4}1iBog23c$HZdmv+h_F#1FLD;RX z0>ugW7hrU6$(zw$2?DfN8UxxZ+AGll?G^2n@PPK}zwJRT?3MRl>hVC}jW(J=$4}0F E0Mb(|e&6qW_ne##CIu}1!2SaSK^E`av2_oESY{!}yiHaMK#T18eSc6`r0xmuL#jJg z$`RyaWari`dyifk?c0}&(j40cC99kZKmX)&VsLhD#G3Nu9|j&QJiRxq`{YLpzc>(P ze_+2qCC>T0L$F6~-w~&!YjV$p+x@Pna_PKN^U8~MJidN|lD}hkf4_A`PFPHBp@$o} z%yP0_{AP+H5vRIoifYrYv4DUvK#`3X)9JHS1nF30@zHGk;}giD*_y2%0*4L6YBe%< zwsyic%VM_XXVrorU2RW`LIep%FFz4o+U#Z8X9@1hRMdnpW1WDvS93kK5Wy+|@z4?E12NYoeYx}Qi@}b^ zHCuo=t3Kt*%4?W>&^f}m3`6XaP!L9rMo}M=HY9I_d-eAGl^G9=Hl7;aJO^SOhJD)b z`dbV$jI}uiaYc<8TTMuQbr16}>xaLOZ4*8?X|0f!WmdEI)eE^aMWU?hD)7xf zwoNE1&S?&zH-7&bCoa>#rk3<5fZnV^z`N>)Er z(!{7e_~blyQcR_GUD>iWy5_*&zAbi(C$S@Iu{5O^WreameqsjXudGxzzcHVPb=rPb z##Dc^uDT+=j8WI0`NqW6^&g`?{N_VwR8drFdlByw&_@;p27St&fPz)*wPnZeVA$_n zV~#%~I5;>==!XhK00z)5g6{6G#9lys#FGoI9N+Upu-G%>unW1VF|NHB zweivh>kNIobWy3-F$}|MYHBdd+oXLi29XcZfniMjV9tn4R$(&g%5LkO2KJv^6>EBN{N^KbC#g-@$tG0FeaoUOa^*HF1LLI}2g=wXtpa^a(*2wU0}icK^YwgdZnkC}r*Y3*%OzDpp)m5!ft`UR zpRp%LdqZ+;9IKrI@_UY{`C%v;7#K)M8E63^XIPj@D&AP>ZPpJJ#a>(|}FOrflHaapeN_2#rRY(ApwM3)wxMBp4B}s1qZ{SoPDJCB3~7a~CWE zFZ-DF*NRI@Se5b~o0T3%WWh@8#DB8?4nU9!G+QozewCS6N z3fBfz?{7VY?%K5rFvwoPShy!3Ysq{#WQ`qM&U`szvTFsx@lGEyF>SPBMe@C?b%!J| zIZGU{bP1#0pi@hp55bPKbO_5X>eGuGt~rw~g_9W*GpzXN?DEtHPUY~COyT8Vo1r`5nMa`XMc)ip^n&(dNnJ#Mr7YLnh1+RdZ`S0iS-m`=On(Al9$4B?x!~yOK z+!c_$fy{j1%+&r5{EOob#~qHlnP|fo#{Xmo1}7+Bf%k1g2s#CaF%IKj*fqst7LQr5 zDfh3p*Kwe{M?ldyPLBG*{Tj--<_WK+XJF66dEVO-iIx-Z($|Z&Ei+z2kY#h;o~Tg# z-toY0E6VK6tc4bD4_Vf)es`dPE5mID(1Ak(LGW+_EQ7NK@*5$?BbHw}B8W{P{4c<7 zWXkw75d=>a5CqSN@GKIh#CWodCw>41c;bgAevl6E^Z-u}AP(^K08bAf4)FBg-%Ag! i{PPwi{*CcJk%-0ca}%kQH~$s{;m&QOt<`>%um1t{%+vn> literal 0 HcmV?d00001 diff --git a/packages/rrweb/test/replay/__image_snapshots__/dialog-test-ts-test-replay-dialog-test-ts-dialog-should-open-dialog-with-show-modal-in-full-snapshot.png b/packages/rrweb/test/replay/__image_snapshots__/dialog-test-ts-test-replay-dialog-test-ts-dialog-should-open-dialog-with-show-modal-in-full-snapshot.png new file mode 100644 index 0000000000000000000000000000000000000000..679ab53ab6018a241532b95e3e29e22a1d15e676 GIT binary patch literal 12505 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 WNin}nDi?M_AL92B_U7*)ef=|oQDxTv literal 0 HcmV?d00001 diff --git a/packages/rrweb/test/replay/__image_snapshots__/dialog-test-ts-test-replay-dialog-test-ts-dialog-show-the-dialog-when-open-attribute-gets-added.png b/packages/rrweb/test/replay/__image_snapshots__/dialog-test-ts-test-replay-dialog-test-ts-dialog-show-the-dialog-when-open-attribute-gets-added.png new file mode 100644 index 0000000000000000000000000000000000000000..a3faffd85acf2672b5411a7b05ffea0471ffe11e GIT binary patch literal 12445 zcmeHNYgAKL7QTq`P!N?Fg@T~vWebXeyb4KFRGI;TqYe}W6Dxv>pg;wYkT6xtIG|vl zLLfY>F42NeLEevmRUo{AA_j~Ql<+8z1PBm9Leg`fGi%nG>5mzwGyb^e&po;4-m~}F z``h2%=iFR7KycAq`O!)QK{WB7?>&ehsxb(%++Ixu+!^kua|Rcsu!Ampko-3NpAcjd zg5SIQ@I}U0PgG;d%tFH?XRA1k|JVJw#m)r3&d;9=5<1i9EW&()T8Nv@zF4YN`@W=X zZwJTxA2RN)&BOVr#qGCvq++!$z)a_N>#k*->TpWlo&NDgr?G@#`GRprTd6p=LAgfZ z!yA>B_j1HiwkBIzk^krFD6v2jr~;c&@BOz1OI;*J>l;L4sefP(0(Ay$%VtD*sh7Ma zMro<{2esOz4q~#LgdjSn*Kc!EQK`ZLI6l^Ij1G$ymVuu}*P(Qyu1+r^2Hez!(qeAbZ_WPKQo$QY z%sMCqwq5E9+?<&*V#MgFa6rR2e* zym`;T7J68Fu_1Y)&Mj@{C%n0OyQ%3852{YT8D3D&>Y0GqbL)4j4cqNU8{|IT|%P#=8GURe4q?Q$AB5;qv6SJfcSq;b}$*PF4Y# zk^TmhxwkD02NA|l4@e{34P60HFj10UG4j2B$kVmnC1<^9cEO`$mPrcV1vme^9UI8W zZ@s$VSZbtb@Z?z6Bkw{#mJ)|N{oF;=Bc#|RnR&E5y`~-3;cj=5lkY3d6StnDSPwD6 z2&QhSiE-O1wv@gJb$wMpRNN{KW-iR$o=Z0-E{u33858GUr1WwkA)4b4Lo7~|sHm!j zjXcO11mYTt*x2+8$B02os>HSA91r`L?LnRI&=2oA4m7~8w>-vhwXEJ*P&L&=;T&aB zqD|e?k|m;{fSHlb^6?UG=(FE@`N?GxXQ@vp%Y<$d=qX?-kC4wb1<7tNSiC8>M zUE7pD*PnnJ&f^fN(Uh57;=n56+>{FIrX&QkBjf9sAU$v=D<=_@R zi8Z8L+{TnmT^6hY^S7TlU#1GKt9>n*vd~QO6pK6=M{EHmsN_Z8+UA>fb=3y{fu?V} z3s1Uw=KDxWM#o(Qw=qU>Gv zWQ1t2mF^f33_>nHUf0_H6j#K?WfcI%5X!DV*(=Ld>_iZ9OVFFL9r(f%4L6Kg0659O z;bs5@Z9NgZj1{Za`_;$mI!n*>RM>D!f?R25c{Lb(D2P=5o{9_JRTo2O{0BLiP50c> zr+5l^L{>4c3M0yh=yiD9n`RSe1)?r~qob{3_*kQusaPOOxx6-YGe)9&x~*nwDGuHT zYYTm%ZsrF}E14;vW&{>g+gkg#Gy+?8Yw@K}QysjI(%*SaCJ`l7O=|S08j`nL*35lL zz|6daGz9@^4I#+N#6%U6>b}nNt+d4#o_hYB#TP$p0+iPT)S_$Z+4AQ{3)m2SfH(ao z-#v5QJ(t3ioxI^Nn92yL*Y&RW>NH@*q#$m|zzm1T&iAdHlJXQ-yw#bP_w~bCcF^t4 z^cd&o&SlW|zKr0~fUi-NAhd@KjE1N_L}LnUv3uBusY!xrp$pIY@Rf z;_+5MEU_EIyLO8ed@~&V5WwqJE(r4sZ4aj%!0oMFk4_|2t&KBtPy4DpKnc>$CYYXM z6SHJ|Gl_&v&4gCFn?z^|V`Eahh|xAoX^+tA()93K11<1$U!vLK^YP7=OegDrwicXx zG9lgo^BJJP-l6r+p*H%dFf-{NtiP_864GC!R9$Sb*){s)*qWC{X^7g*bEo3gZuAPlUPx zSm49ho}#WmU4dpYQ7s|9K(?T4e^)1S@00t=2q6a3B4$yNUv^;<~c+c`6`=5^}(c{SfL3Hh{ WNin}nDi?M_AL92B_U7*)ef=|oQDxTv literal 0 HcmV?d00001 diff --git a/packages/rrweb/test/replay/dialog.test.ts b/packages/rrweb/test/replay/dialog.test.ts new file mode 100644 index 0000000000..7fc1ab99f2 --- /dev/null +++ b/packages/rrweb/test/replay/dialog.test.ts @@ -0,0 +1,159 @@ +import * as fs from 'fs'; +import { toMatchImageSnapshot } from 'jest-image-snapshot'; +import * as path from 'path'; +import { vi } from 'vitest'; + +import dialogPlaybackEvents, { + closedFullSnapshotTime, + showIncrementalAttributeTime, + closeIncrementalAttributeTime, + showModalIncrementalAttributeTime, + showFullSnapshotTime, + showModalFullSnapshotTime, + showModalIncrementalAddTime, + switchBetweenShowModalAndShowIncrementalAttributeTime, + switchBetweenShowAndShowModalIncrementalAttributeTime, +} from '../events/dialog-playback'; +import { + fakeGoto, + getServerURL, + hideMouseAnimation, + ISuite, + launchPuppeteer, + startServer, + waitForRAF, +} from '../utils'; + +expect.extend({ toMatchImageSnapshot }); + +describe('dialog', () => { + vi.setConfig({ testTimeout: 100_000 }); + let code: ISuite['code']; + let page: ISuite['page']; + let browser: ISuite['browser']; + let server: ISuite['server']; + let serverURL: ISuite['serverURL']; + + beforeAll(async () => { + server = await startServer(); + serverURL = getServerURL(server); + browser = await launchPuppeteer(); + + const bundlePath = path.resolve(__dirname, '../../dist/rrweb.umd.cjs'); + code = fs.readFileSync(bundlePath, 'utf8'); + }); + + afterEach(async () => { + await page.close(); + }); + + afterAll(async () => { + await server.close(); + await browser.close(); + }); + + beforeEach(async () => { + page = await browser.newPage(); + page.on('console', (msg) => { + console.log(msg.text()); + }); + + await fakeGoto(page, `${serverURL}/html/dialog.html`); + await page.evaluate(code); + await waitForRAF(page); + await hideMouseAnimation(page); + }); + + [ + { + name: 'show the dialog when open attribute gets added', + time: showIncrementalAttributeTime, + }, + { + name: 'should close dialog again when open attribute gets removed', + time: closeIncrementalAttributeTime, + }, + { + name: 'should open dialog with showModal', + time: showModalIncrementalAttributeTime, + }, + { + name: 'should switch between showModal and show', + time: switchBetweenShowModalAndShowIncrementalAttributeTime, + }, + { + name: 'should switch between show and showModal', + time: switchBetweenShowAndShowModalIncrementalAttributeTime, + }, + { + name: 'should open dialog with show in full snapshot', + time: showFullSnapshotTime, + }, + { + name: 'should open dialog with showModal in full snapshot', + time: showModalFullSnapshotTime, + }, + { + name: 'should add an opened dialog with showModal in incremental snapshot', + time: showModalIncrementalAddTime, + }, + { + name: 'should add an opened dialog with showModal in incremental snapshot alternative', + time: [showModalFullSnapshotTime, showModalIncrementalAddTime], + }, + ].forEach(({ name, time }) => { + [true, false].forEach((useVirtualDom) => { + it(`${name} (virtual dom: ${useVirtualDom})`, async () => { + await page.evaluate( + `let events = ${JSON.stringify(dialogPlaybackEvents)}`, + ); + await page.evaluate(` + const { Replayer } = rrweb; + window.replayer = new Replayer(events, { useVirtualDom: ${useVirtualDom} }); + `); + const timeArray = Array.isArray(time) ? time : [time]; + for (let i = 0; i < timeArray.length; i++) { + await page.evaluate(` + window.replayer.pause(${timeArray[i]}); + `); + await waitForRAF(page); + } + + const frameImage = await page!.screenshot({ + fullPage: false, + }); + const defaultImageFilePrefix = + 'dialog-test-ts-test-replay-dialog-test-ts-dialog'; + const kebabCaseName = name + .replace(/ /g, '-') + .replace(/showModal/g, 'show-modal'); + const imageFileName = `${defaultImageFilePrefix}-${kebabCaseName}`; + expect(frameImage).toMatchImageSnapshot({ + customSnapshotIdentifier: imageFileName, + failureThreshold: 0.05, + failureThresholdType: 'percent', + dumpDiffToConsole: true, + storeReceivedOnFailure: true, + }); + }); + }); + }); + + it('closed dialogs show nothing', async () => { + await page.evaluate(`let events = ${JSON.stringify(dialogPlaybackEvents)}`); + await page.evaluate(` + const { Replayer } = rrweb; + window.replayer = new Replayer(events); + `); + await waitForRAF(page); + + const frameImage = await page!.screenshot(); + expect(frameImage).toMatchImageSnapshot({ + failureThreshold: 0.05, + failureThresholdType: 'percent', + }); + }); + + // TODO: implement me in the future + it.skip('should trigger showModal on multiple dialogs in a specific order'); +}); diff --git a/packages/rrweb/test/replayer.test.ts b/packages/rrweb/test/replayer.test.ts index 404357a799..3cdc05abd5 100644 --- a/packages/rrweb/test/replayer.test.ts +++ b/packages/rrweb/test/replayer.test.ts @@ -18,7 +18,8 @@ import inputEvents from './events/input'; import iframeEvents from './events/iframe'; import selectionEvents from './events/selection'; import shadowDomEvents from './events/shadow-dom'; -import textareaEvents from './events/bad-textarea'; +import badTextareaEvents from './events/bad-textarea'; +import badStyleEvents from './events/bad-style'; import StyleSheetTextMutation from './events/style-sheet-text-mutation'; import canvasInIframe from './events/canvas-in-iframe'; import adoptedStyleSheet from './events/adopted-style-sheet'; @@ -1142,7 +1143,7 @@ describe('replayer', function () { }); it('can deal with legacy duplicate/conflicting values on textareas', async () => { - await page.evaluate(`events = ${JSON.stringify(textareaEvents)}`); + await page.evaluate(`events = ${JSON.stringify(badTextareaEvents)}`); const displayValue = await page.evaluate(` const { Replayer } = rrweb; @@ -1155,4 +1156,25 @@ describe('replayer', function () { // If the custom element is defined, the display value will be 'block'. expect(displayValue).toEqual('this value is used for replay'); }); + + it('can deal with duplicate/conflicting values on style elements', async () => { + await page.evaluate(`events = ${JSON.stringify(badStyleEvents)}`); + + const changedColors = await page.evaluate(` + const { Replayer } = rrweb; + const replayer = new Replayer(events); + replayer.pause(1000); + // Get the color of the elements after applying the style mutation event + [ + replayer.iframe.contentWindow.getComputedStyle( + replayer.iframe.contentDocument.querySelector('#one'), + ).color, + replayer.iframe.contentWindow.getComputedStyle( + replayer.iframe.contentDocument.querySelector('#two'), + ).color, + ]; +`); + const newColor = 'rgb(255, 255, 0)'; // yellow + expect(changedColors).toEqual([newColor, newColor]); + }); }); diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts index c7347d89c3..42c8961304 100644 --- a/packages/rrweb/test/utils.ts +++ b/packages/rrweb/test/utils.ts @@ -110,9 +110,17 @@ export function stringifySnapshots(snapshots: eventWithTime[]): string { snapshots .filter((s) => { if ( - s.type === EventType.IncrementalSnapshot && - (s.data.source === IncrementalSource.MouseMove || - s.data.source === IncrementalSource.ViewportResize) + // mouse move or viewport resize can happen on accidental user interference + // so we ignore them + (s.type === EventType.IncrementalSnapshot && + (s.data.source === IncrementalSource.MouseMove || + s.data.source === IncrementalSource.ViewportResize)) || + // ignore '[vite] connected' messages from vite + (s.type === EventType.Plugin && + s.data.plugin === 'rrweb/console@1' && + (s.data.payload as { payload: string[] })?.payload?.find((msg) => + msg.includes('[vite] connected'), + )) ) { return false; } @@ -242,18 +250,18 @@ export function stringifySnapshots(snapshots: eventWithTime[]): string { function stripBlobURLsFromAttributes(node: { attributes: { - src?: string; + [key: string]: any; }; }) { - if ( - 'src' in node.attributes && - node.attributes.src && - typeof node.attributes.src === 'string' && - node.attributes.src.startsWith('blob:') - ) { - node.attributes.src = node.attributes.src - .replace(/[\w-]+$/, '...') - .replace(/:[0-9]+\//, ':xxxx/'); + for (const attr in node.attributes) { + if ( + typeof node.attributes[attr] === 'string' && + node.attributes[attr].startsWith('blob:') + ) { + node.attributes[attr] = node.attributes[attr] + .replace(/[\w-]+$/, '...') + .replace(/:[0-9]+\//, ':xxxx/'); + } } } diff --git a/packages/rrweb/tsconfig.json b/packages/rrweb/tsconfig.json index 6a8a5ffb3d..d27cd53179 100644 --- a/packages/rrweb/tsconfig.json +++ b/packages/rrweb/tsconfig.json @@ -9,7 +9,6 @@ "vite/client", "@types/dom-mediacapture-transform", "@types/offscreencanvas", - // rrweb specific: /* * @see https://vitest.dev/config/#globals @@ -18,7 +17,6 @@ */ "vitest/globals" ], - // TODO: enable me in the future, this is quite a large project // at time of writing (April 2024) there are over 100 errors in rrweb "strict": false @@ -27,6 +25,9 @@ { "path": "../types" }, + { + "path": "../utils" + }, { "path": "../rrdom" }, diff --git a/packages/types/CHANGELOG.md b/packages/types/CHANGELOG.md index 18210906af..b0e111d212 100644 --- a/packages/types/CHANGELOG.md +++ b/packages/types/CHANGELOG.md @@ -1,5 +1,32 @@ # @rrweb/types +## 2.0.13 + +### Patch Changes + +- Merge from rrweb remote upstream + +- Updated dependencies []: + - @saola.ai/rrweb-snapshot@2.0.13 + +## 2.0.0-alpha.17 + +### Minor Changes + +- [#1503](https://github.com/rrweb-io/rrweb/pull/1503) [`335639a`](https://github.com/rrweb-io/rrweb/commit/335639af9b0ce7f70eb0f38ce113d877c7325158) Thanks [@Juice10](https://github.com/Juice10)! - Support top-layer components. Fixes #1381. + +### Patch Changes + +- Updated dependencies [[`40bbc25`](https://github.com/rrweb-io/rrweb/commit/40bbc25fc287badc317a53f2d3f21b1c9f2b211b), [`335639a`](https://github.com/rrweb-io/rrweb/commit/335639af9b0ce7f70eb0f38ce113d877c7325158), [`d350da8`](https://github.com/rrweb-io/rrweb/commit/d350da8552d8616dd118ee550bdfbce082986562), [`be6bf52`](https://github.com/rrweb-io/rrweb/commit/be6bf52c248c35de1b3491e3a3440ff61f876414)]: + - rrweb-snapshot@2.0.0-alpha.17 + +## 2.0.0-alpha.16 + +### Patch Changes + +- Updated dependencies [[`a2c8a1a`](https://github.com/rrweb-io/rrweb/commit/a2c8a1a37bfcf8389b280af792262c8263a979a3), [`d08624c`](https://github.com/rrweb-io/rrweb/commit/d08624cb28add386c3618a0e6607424c3f1884d8)]: + - rrweb-snapshot@2.0.0-alpha.16 + ## 2.0.12 ### Patch Changes diff --git a/packages/types/package.json b/packages/types/package.json index 0019d485e0..f95bff061d 100644 --- a/packages/types/package.json +++ b/packages/types/package.json @@ -1,6 +1,6 @@ { "name": "@saola.ai/rrweb-types", - "version": "2.0.12", + "version": "2.0.13", "publishConfig": { "access": "public" }, @@ -10,9 +10,9 @@ ], "scripts": { "dev": "vite build --watch", - "build": "tsc -noEmit && vite build", + "build": "yarn turbo run prepublish", "check-types": "tsc -noEmit", - "prepublish": "npm run build", + "prepublish": "tsc -noEmit && vite build", "lint": "yarn eslint src/**/*.ts" }, "homepage": "https://github.com/rrweb-io/rrweb/tree/main/packages/@rrweb/types#readme", @@ -46,19 +46,11 @@ "package.json" ], "devDependencies": { - "vite": "^5.2.8", - "vite-plugin-dts": "^3.8.1" + "vite": "^5.3.1", + "vite-plugin-dts": "^3.9.1" }, "dependencies": { - "@changesets/cli": "^2.27.1", - "@monorepo-utils/workspaces-to-typescript-project-references": "^2.8.2", - "@saola.ai/rrweb-snapshot": "^2.0.12", - "browserslist": "^4.22.1", - "concurrently": "^7.1.0", - "cssom": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz", - "eslint": "^8.53.0", - "eslint-plugin-jest": "^27.6.0", - "turbo": "^2.0.3" + "@saola.ai/rrweb-snapshot": "^2.0.13" }, "browserslist": [ "supports es6-class" diff --git a/packages/utils/CHANGELOG.md b/packages/utils/CHANGELOG.md new file mode 100644 index 0000000000..6fd00c059f --- /dev/null +++ b/packages/utils/CHANGELOG.md @@ -0,0 +1,13 @@ +# @rrweb/utils + +## 2.0.13 + +### Patch Changes + +- Merge from rrweb remote upstream + +## 2.0.0-alpha.17 + +### Patch Changes + +- [#1509](https://github.com/rrweb-io/rrweb/pull/1509) [`be6bf52`](https://github.com/rrweb-io/rrweb/commit/be6bf52c248c35de1b3491e3a3440ff61f876414) Thanks [@Juice10](https://github.com/Juice10)! - Reverse monkey patch built in methods to support LWC (and other frameworks like angular which monkey patch built in methods). diff --git a/packages/utils/Readme.md b/packages/utils/Readme.md new file mode 100644 index 0000000000..2107a2f228 --- /dev/null +++ b/packages/utils/Readme.md @@ -0,0 +1,178 @@ +# @rrweb/utils + +This package contains the shared utility functions used across rrweb packages. +See the [guide](../../guide.md) for more info on rrweb. + +## Sponsors + +[Become a sponsor](https://opencollective.com/rrweb#sponsor) and get your logo on our README on Github with a link to your site. + +### Gold Sponsors 🥇 + +
+ +sponsor +sponsor +sponsor +sponsor +sponsor +sponsor +sponsor + +
+ +### Silver Sponsors 🥈 + +
+ +sponsor +sponsor +sponsor +sponsor +sponsor +sponsor +sponsor + +
+ +### Bronze Sponsors 🥉 + +
+ +sponsor +sponsor +sponsor +sponsor +sponsor +sponsor +sponsor +sponsor +sponsor + +
+ +### Backers + + + +## Core Team Members + + + + + + + + +
+ + +
Yuyz0112 +

+ + 		+ + +
Yun Feng +

+ + 		+ + +
eoghanmurray +

+ + 		+ + +
Juice10 +
open for rrweb consulting + +
+ +## Who's using rrweb? + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + Smart screen recording for SaaS + +
+ + The first ever UX automation tool + + + + Remote Access & Co-Browsing + + + + The open source, fullstack Monitoring Platform. + + + + Comprehensive data analytics platform that empowers businesses to gain valuable insights and make data-driven decisions. + +
+ + Intercept, Modify, Record & Replay HTTP Requests. + + + + In-app bug reporting & customer feedback platform. + + + + Self-hosted website analytics with heatmaps and session recordings. + + + + Interactive product demos for small marketing teams + +
diff --git a/packages/utils/package.json b/packages/utils/package.json new file mode 100644 index 0000000000..4df05440ad --- /dev/null +++ b/packages/utils/package.json @@ -0,0 +1,53 @@ +{ + "name": "@saola.ai/rrweb-utils", + "version": "2.0.13", + "publishConfig": { + "access": "public" + }, + "keywords": [ + "rrweb", + "@rrweb/utils" + ], + "scripts": { + "dev": "vite build --watch", + "build": "tsc -noEmit && vite build", + "check-types": "tsc -noEmit", + "prepublish": "npm run build", + "lint": "yarn eslint src/**/*.ts" + }, + "homepage": "https://github.com/rrweb-io/rrweb/tree/main/packages/@rrweb/utils#readme", + "bugs": { + "url": "https://github.com/rrweb-io/rrweb/issues" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/rrweb-io/rrweb.git" + }, + "license": "MIT", + "type": "module", + "main": "./dist/rrweb-utils.umd.cjs", + "module": "./dist/rrweb-utils.js", + "unpkg": "./dist/rrweb-utils.umd.cjs", + "typings": "dist/index.d.ts", + "exports": { + ".": { + "import": { + "types": "./dist/index.d.ts", + "default": "./dist/rrweb-utils.js" + }, + "require": { + "types": "./dist/index.d.cts", + "default": "./dist/rrweb-utils.umd.cjs" + } + } + }, + "files": [ + "dist", + "package.json" + ], + "devDependencies": { + "vite": "^5.2.8", + "vite-plugin-dts": "^3.8.1" + }, + "dependencies": {} +} diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts new file mode 100644 index 0000000000..b88d7f452e --- /dev/null +++ b/packages/utils/src/index.ts @@ -0,0 +1,221 @@ +type PrototypeOwner = Node | ShadowRoot | MutationObserver | Element; +type TypeofPrototypeOwner = + | typeof Node + | typeof ShadowRoot + | typeof MutationObserver + | typeof Element; + +type BasePrototypeCache = { + Node: typeof Node.prototype; + ShadowRoot: typeof ShadowRoot.prototype; + MutationObserver: typeof MutationObserver.prototype; + Element: typeof Element.prototype; +}; + +const testableAccessors = { + Node: ['childNodes', 'parentNode', 'parentElement', 'textContent'] as const, + ShadowRoot: ['host', 'styleSheets'] as const, + Element: ['shadowRoot', 'querySelector', 'querySelectorAll'] as const, + MutationObserver: [] as const, +} as const; + +const testableMethods = { + Node: ['contains', 'getRootNode'] as const, + ShadowRoot: ['getSelection'], + Element: [], + MutationObserver: ['constructor'], +} as const; + +const untaintedBasePrototype: Partial = {}; + +export function getUntaintedPrototype( + key: T, +): BasePrototypeCache[T] { + if (untaintedBasePrototype[key]) + return untaintedBasePrototype[key] as BasePrototypeCache[T]; + + const defaultObj = globalThis[key] as TypeofPrototypeOwner; + const defaultPrototype = defaultObj.prototype as BasePrototypeCache[T]; + + // use list of testable accessors to check if the prototype is tainted + const accessorNames = + key in testableAccessors ? testableAccessors[key] : undefined; + const isUntaintedAccessors = Boolean( + accessorNames && + // @ts-expect-error 2345 + accessorNames.every((accessor: keyof typeof defaultPrototype) => + Boolean( + Object.getOwnPropertyDescriptor(defaultPrototype, accessor) + ?.get?.toString() + .includes('[native code]'), + ), + ), + ); + + const methodNames = key in testableMethods ? testableMethods[key] : undefined; + const isUntaintedMethods = Boolean( + methodNames && + methodNames.every( + // @ts-expect-error 2345 + (method: keyof typeof defaultPrototype) => + typeof defaultPrototype[method] === 'function' && + defaultPrototype[method]?.toString().includes('[native code]'), + ), + ); + + if (isUntaintedAccessors && isUntaintedMethods) { + untaintedBasePrototype[key] = defaultObj.prototype as BasePrototypeCache[T]; + return defaultObj.prototype as BasePrototypeCache[T]; + } + + try { + const iframeEl = document.createElement('iframe'); + document.body.appendChild(iframeEl); + const win = iframeEl.contentWindow; + if (!win) return defaultObj.prototype as BasePrototypeCache[T]; + + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any + const untaintedObject = (win as any)[key] + .prototype as BasePrototypeCache[T]; + // cleanup + document.body.removeChild(iframeEl); + + if (!untaintedObject) return defaultPrototype; + + return (untaintedBasePrototype[key] = untaintedObject); + } catch { + return defaultPrototype; + } +} + +const untaintedAccessorCache: Record< + string, + (this: PrototypeOwner, ...args: unknown[]) => unknown +> = {}; + +export function getUntaintedAccessor< + K extends keyof BasePrototypeCache, + T extends keyof BasePrototypeCache[K], +>( + key: K, + instance: BasePrototypeCache[K], + accessor: T, +): BasePrototypeCache[K][T] { + const cacheKey = `${key}.${String(accessor)}`; + if (untaintedAccessorCache[cacheKey]) + return untaintedAccessorCache[cacheKey].call( + instance, + ) as BasePrototypeCache[K][T]; + + const untaintedPrototype = getUntaintedPrototype(key); + // eslint-disable-next-line @typescript-eslint/unbound-method + const untaintedAccessor = Object.getOwnPropertyDescriptor( + untaintedPrototype, + accessor, + )?.get; + + if (!untaintedAccessor) return instance[accessor]; + + untaintedAccessorCache[cacheKey] = untaintedAccessor; + + return untaintedAccessor.call(instance) as BasePrototypeCache[K][T]; +} + +type BaseMethod = ( + this: BasePrototypeCache[K], + ...args: unknown[] +) => unknown; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const untaintedMethodCache: Record> = {}; +export function getUntaintedMethod< + K extends keyof BasePrototypeCache, + T extends keyof BasePrototypeCache[K], +>( + key: K, + instance: BasePrototypeCache[K], + method: T, +): BasePrototypeCache[K][T] { + const cacheKey = `${key}.${String(method)}`; + if (untaintedMethodCache[cacheKey]) + return untaintedMethodCache[cacheKey].bind( + instance, + ) as BasePrototypeCache[K][T]; + + const untaintedPrototype = getUntaintedPrototype(key); + const untaintedMethod = untaintedPrototype[method]; + + if (typeof untaintedMethod !== 'function') return instance[method]; + + untaintedMethodCache[cacheKey] = untaintedMethod as BaseMethod; + + return untaintedMethod.bind(instance) as BasePrototypeCache[K][T]; +} + +export function childNodes(n: Node): NodeListOf { + return getUntaintedAccessor('Node', n, 'childNodes'); +} + +export function parentNode(n: Node): ParentNode | null { + return getUntaintedAccessor('Node', n, 'parentNode'); +} + +export function parentElement(n: Node): HTMLElement | null { + return getUntaintedAccessor('Node', n, 'parentElement'); +} + +export function textContent(n: Node): string | null { + return getUntaintedAccessor('Node', n, 'textContent'); +} + +export function contains(n: Node, other: Node): boolean { + return getUntaintedMethod('Node', n, 'contains')(other); +} + +export function getRootNode(n: Node): Node { + return getUntaintedMethod('Node', n, 'getRootNode')(); +} + +export function host(n: ShadowRoot): Element | null { + if (!n || !('host' in n)) return null; + return getUntaintedAccessor('ShadowRoot', n, 'host'); +} + +export function styleSheets(n: ShadowRoot): StyleSheetList { + return n.styleSheets; +} + +export function shadowRoot(n: Node): ShadowRoot | null { + if (!n || !('shadowRoot' in n)) return null; + return getUntaintedAccessor('Element', n as Element, 'shadowRoot'); +} + +export function querySelector(n: Element, selectors: string): Element | null { + return getUntaintedAccessor('Element', n, 'querySelector')(selectors); +} + +export function querySelectorAll( + n: Element, + selectors: string, +): NodeListOf { + return getUntaintedAccessor('Element', n, 'querySelectorAll')(selectors); +} + +export function mutationObserverCtor(): (typeof MutationObserver)['prototype']['constructor'] { + return getUntaintedPrototype('MutationObserver').constructor; +} + +export default { + childNodes, + parentNode, + parentElement, + textContent, + contains, + getRootNode, + host, + styleSheets, + shadowRoot, + querySelector, + querySelectorAll, + mutationObserver: mutationObserverCtor, +}; diff --git a/packages/utils/tsconfig.json b/packages/utils/tsconfig.json new file mode 100644 index 0000000000..1902007d56 --- /dev/null +++ b/packages/utils/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../../tsconfig.base.json", + "include": ["src"], + "exclude": ["vite.config.ts"], + "compilerOptions": { + "rootDir": "src", + "tsBuildInfoFile": "./tsconfig.tsbuildinfo" + }, + "references": [] +} diff --git a/packages/utils/vite.config.js b/packages/utils/vite.config.js new file mode 100644 index 0000000000..854f2b9ef0 --- /dev/null +++ b/packages/utils/vite.config.js @@ -0,0 +1,4 @@ +import path from 'path'; +import config from '../../vite.config.default'; + +export default config(path.resolve(__dirname, 'src/index.ts'), 'rrwebUtils'); diff --git a/packages/web-extension/CHANGELOG.md b/packages/web-extension/CHANGELOG.md index 65ef125f1a..d35d11aedb 100644 --- a/packages/web-extension/CHANGELOG.md +++ b/packages/web-extension/CHANGELOG.md @@ -1,5 +1,35 @@ # @rrweb/web-extension +## 2.0.13 + +### Patch Changes + +- Merge from rrweb remote upstream + +- Updated dependencies []: + - @saola.ai/rrweb-player@2.0.13 + - @saola.ai/rrweb@2.0.13 + +## 2.0.0-alpha.17 + +### Minor Changes + +- [#1522](https://github.com/rrweb-io/rrweb/pull/1522) [`b1f9daa`](https://github.com/rrweb-io/rrweb/commit/b1f9daaa42f007a641104613bb07f141585f9e77) Thanks [@kirankunigiri](https://github.com/kirankunigiri)! - Added session downloader for chrome extension + +### Patch Changes + +- Updated dependencies [[`40bbc25`](https://github.com/rrweb-io/rrweb/commit/40bbc25fc287badc317a53f2d3f21b1c9f2b211b), [`68076b7`](https://github.com/rrweb-io/rrweb/commit/68076b724ff19d198d4f351a05063b85e1705a8c), [`8059d96`](https://github.com/rrweb-io/rrweb/commit/8059d9695146626b102b2059a3a9b932d5f598f6), [`335639a`](https://github.com/rrweb-io/rrweb/commit/335639af9b0ce7f70eb0f38ce113d877c7325158), [`be6bf52`](https://github.com/rrweb-io/rrweb/commit/be6bf52c248c35de1b3491e3a3440ff61f876414)]: + - rrweb@2.0.0-alpha.17 + - rrweb-player@2.0.0-alpha.17 + +## 2.0.0-alpha.16 + +### Patch Changes + +- Updated dependencies [[`a2c8a1a`](https://github.com/rrweb-io/rrweb/commit/a2c8a1a37bfcf8389b280af792262c8263a979a3), [`d08624c`](https://github.com/rrweb-io/rrweb/commit/d08624cb28add386c3618a0e6607424c3f1884d8)]: + - rrweb@2.0.0-alpha.16 + - rrweb-player@2.0.0-alpha.16 + ## 2.0.12 ### Patch Changes diff --git a/packages/web-extension/package.json b/packages/web-extension/package.json index 251ff17dec..9179a294be 100644 --- a/packages/web-extension/package.json +++ b/packages/web-extension/package.json @@ -1,7 +1,7 @@ { "name": "@saola.ai/rrweb-web-extension", "private": true, - "version": "2.0.12", + "version": "2.0.13", "description": "The web extension of rrweb which helps to run rrweb on any website out of box", "author": "rrweb-io", "license": "MIT", @@ -18,13 +18,12 @@ "prepublish": "yarn build" }, "devDependencies": { - "@saola.ai/rrweb-types": "^2.0.12", + "@saola.ai/rrweb-types": "^2.0.13", "@types/react-dom": "^18.0.6", "@types/webextension-polyfill": "^0.9.1", "@vitejs/plugin-react": "^4.2.1", - "cross-env": "^7.0.3", "type-fest": "^2.19.0", - "vite": "^5.2.8", + "vite": "^5.3.1", "vite-plugin-web-extension": "^4.1.3", "vite-plugin-zip-pack": "^1.2.2", "webextension-polyfill": "^0.10.0" @@ -42,7 +41,7 @@ "react-dom": "^18.2.0", "react-icons": "^4.4.0", "react-router-dom": "^6.4.1", - "@saola.ai/rrweb": "^2.0.12", - "@saola.ai/rrweb-player": "^2.0.12" + "@saola.ai/rrweb": "^2.0.13", + "@saola.ai/rrweb-player": "^2.0.13" } } diff --git a/packages/web-extension/src/background/index.ts b/packages/web-extension/src/background/index.ts index 9a0a7c58b3..4ffda7827c 100644 --- a/packages/web-extension/src/background/index.ts +++ b/packages/web-extension/src/background/index.ts @@ -2,11 +2,11 @@ import Browser from 'webextension-polyfill'; import type { eventWithTime } from '@saola.ai/rrweb-types'; import Channel from '~/utils/channel'; import { - LocalData, + type LocalData, LocalDataKey, RecorderStatus, - Settings, - SyncData, + type Settings, + type SyncData, SyncDataKey, } from '~/types'; import { pauseRecording, resumeRecording } from '~/utils/recording'; diff --git a/packages/web-extension/src/components/CircleButton.tsx b/packages/web-extension/src/components/CircleButton.tsx index abbb68e576..f114a1cb66 100644 --- a/packages/web-extension/src/components/CircleButton.tsx +++ b/packages/web-extension/src/components/CircleButton.tsx @@ -1,4 +1,4 @@ -import { Button, ButtonProps } from '@chakra-ui/react'; +import { Button, type ButtonProps } from '@chakra-ui/react'; interface CircleButtonProps extends ButtonProps { diameter: number; diff --git a/packages/web-extension/src/components/SidebarWithHeader.tsx b/packages/web-extension/src/components/SidebarWithHeader.tsx index bcc07147ff..7895efe613 100644 --- a/packages/web-extension/src/components/SidebarWithHeader.tsx +++ b/packages/web-extension/src/components/SidebarWithHeader.tsx @@ -12,8 +12,8 @@ import { Drawer, DrawerContent, useDisclosure, - BoxProps, - FlexProps, + type BoxProps, + type FlexProps, Heading, Stack, Text, diff --git a/packages/web-extension/src/content/index.ts b/packages/web-extension/src/content/index.ts index 18b35b2a31..673f8ad577 100644 --- a/packages/web-extension/src/content/index.ts +++ b/packages/web-extension/src/content/index.ts @@ -1,16 +1,16 @@ -import Browser, { Storage } from 'webextension-polyfill'; +import Browser, { type Storage } from 'webextension-polyfill'; import { nanoid } from 'nanoid'; import type { eventWithTime } from '@saola.ai/rrweb-types'; import { - LocalData, + type LocalData, LocalDataKey, RecorderStatus, ServiceName, - Session, - RecordStartedMessage, - RecordStoppedMessage, + type Session, + type RecordStartedMessage, + type RecordStoppedMessage, MessageName, - EmitEventMessage, + type EmitEventMessage, } from '~/types'; import Channel from '~/utils/channel'; import { isInCrossOriginIFrame } from '~/utils'; diff --git a/packages/web-extension/src/content/inject.ts b/packages/web-extension/src/content/inject.ts index 3ac619e642..ded4a76422 100644 --- a/packages/web-extension/src/content/inject.ts +++ b/packages/web-extension/src/content/inject.ts @@ -1,7 +1,7 @@ import { record } from '@saola.ai/rrweb'; import type { recordOptions } from '@saola.ai/rrweb'; import type { eventWithTime } from '@saola.ai/rrweb-types'; -import { MessageName, RecordStartedMessage } from '~/types'; +import { MessageName, type RecordStartedMessage } from '~/types'; import { isInCrossOriginIFrame } from '~/utils'; /** diff --git a/packages/web-extension/src/pages/SessionList.tsx b/packages/web-extension/src/pages/SessionList.tsx index 8aead1834f..d285932029 100644 --- a/packages/web-extension/src/pages/SessionList.tsx +++ b/packages/web-extension/src/pages/SessionList.tsx @@ -23,15 +23,15 @@ import { useReactTable, flexRender, getCoreRowModel, - SortingState, + type SortingState, getSortedRowModel, - PaginationState, + type PaginationState, } from '@tanstack/react-table'; import { VscTriangleDown, VscTriangleUp } from 'react-icons/vsc'; import { useNavigate } from 'react-router-dom'; -import { Session, EventName } from '~/types'; +import { type Session, EventName } from '~/types'; import Channel from '~/utils/channel'; -import { deleteSessions, getAllSessions } from '~/utils/storage'; +import { deleteSessions, getAllSessions, downloadSessions } from '~/utils/storage'; import { FiChevronLeft, FiChevronRight, @@ -292,24 +292,38 @@ export function SessionList() { ))} {Object.keys(rowSelection).length > 0 && ( - + + + + )} diff --git a/packages/web-extension/src/popup/App.tsx b/packages/web-extension/src/popup/App.tsx index a6bed7b3f2..c83a03ced4 100644 --- a/packages/web-extension/src/popup/App.tsx +++ b/packages/web-extension/src/popup/App.tsx @@ -10,16 +10,13 @@ import { } from '@chakra-ui/react'; import { FiSettings, FiList, FiPause, FiPlay } from 'react-icons/fi'; import Channel from '~/utils/channel'; -import { +import type { LocalData, - LocalDataKey, - RecorderStatus, - ServiceName, RecordStartedMessage, RecordStoppedMessage, Session, - EventName, } from '~/types'; +import { LocalDataKey, RecorderStatus, ServiceName, EventName } from '~/types'; import Browser from 'webextension-polyfill'; import { CircleButton } from '~/components/CircleButton'; import { Timer } from './Timer'; @@ -39,9 +36,8 @@ export function App() { void Browser.storage.local.get(LocalDataKey.recorderStatus).then((data) => { const localData = data as LocalData; if (!localData || !localData[LocalDataKey.recorderStatus]) return; - const { status, startTimestamp, pausedTimestamp } = localData[ - LocalDataKey.recorderStatus - ]; + const { status, startTimestamp, pausedTimestamp } = + localData[LocalDataKey.recorderStatus]; setStatus(status); if (startTimestamp && pausedTimestamp) setStartTime(Date.now() - pausedTimestamp + startTimestamp || 0); diff --git a/packages/web-extension/src/utils/channel.ts b/packages/web-extension/src/utils/channel.ts index 1a8e9b2a82..fc090bcc7f 100644 --- a/packages/web-extension/src/utils/channel.ts +++ b/packages/web-extension/src/utils/channel.ts @@ -1,5 +1,5 @@ import mitt from 'mitt'; -import Browser, { Runtime } from 'webextension-polyfill'; +import Browser, { type Runtime } from 'webextension-polyfill'; export type Message = EventType | ServiceType; export type EventType = { diff --git a/packages/web-extension/src/utils/recording.ts b/packages/web-extension/src/utils/recording.ts index 96f77c5da7..832c5a58fd 100644 --- a/packages/web-extension/src/utils/recording.ts +++ b/packages/web-extension/src/utils/recording.ts @@ -2,11 +2,11 @@ import Browser from 'webextension-polyfill'; import type { eventWithTime } from '@saola.ai/rrweb-types'; import { - LocalData, + type LocalData, LocalDataKey, RecorderStatus, - RecordStartedMessage, - RecordStoppedMessage, + type RecordStartedMessage, + type RecordStoppedMessage, ServiceName, } from '~/types'; import type Channel from './channel'; diff --git a/packages/web-extension/src/utils/storage.ts b/packages/web-extension/src/utils/storage.ts index 6c4c460ac8..e5fc05ab26 100644 --- a/packages/web-extension/src/utils/storage.ts +++ b/packages/web-extension/src/utils/storage.ts @@ -88,3 +88,22 @@ export async function deleteSessions(ids: string[]) { return Promise.all([eventTransition.done, sessionTransition.done]); }); } + +export async function downloadSessions(ids: string[]) { + for (const sessionId of ids) { + const events = await getEvents(sessionId); + const session = await getSession(sessionId); + const blob = new Blob([JSON.stringify({ session, events }, null, 2)], { + type: 'application/json', + }); + + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = `${session.name}.json`; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); + } +} diff --git a/packages/web-extension/vite.config.ts b/packages/web-extension/vite.config.ts index 0fd0602706..2ca58feab9 100644 --- a/packages/web-extension/vite.config.ts +++ b/packages/web-extension/vite.config.ts @@ -5,6 +5,8 @@ import * as path from 'path'; import type { PackageJson } from 'type-fest'; import react from '@vitejs/plugin-react'; +const emptyOutDir = !process.argv.includes('--watch'); + function useSpecialFormat( entriesToUse: string[], format: LibraryFormats, @@ -46,7 +48,7 @@ export default defineConfig({ 'dist', process.env.TARGET_BROWSER as string, ), - emptyOutDir: true, + emptyOutDir, }, // Add the webExtension plugin plugins: [ diff --git a/tsconfig.base.json b/tsconfig.base.json index 6ca3030761..d01ad45552 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -14,7 +14,7 @@ "sourceMap": true, "skipLibCheck": true, "declaration": true, - "importsNotUsedAsValues": "error", + "verbatimModuleSyntax": true, "strict": true, "removeComments": true, "noImplicitAny": true, diff --git a/turbo.json b/turbo.json index a48aa0dfc4..54bd1b278f 100644 --- a/turbo.json +++ b/turbo.json @@ -7,9 +7,10 @@ "vite.config.defaults.ts", "tsconfig.json" ], + "globalPassThroughEnv": ["PUPPETEER_HEADLESS"], "tasks": { "prepublish": { - "dependsOn": ["^prepublish"], + "dependsOn": ["^prepublish", "//#references:update"], "outputs": [ "lib/**", "es/**", @@ -20,24 +21,30 @@ ] }, "test": { - "dependsOn": ["^prepublish"], - "passThroughEnv": ["PUPPETEER_HEADLESS"] + "dependsOn": ["^prepublish"] }, "test:watch": { "persistent": true, - "passThroughEnv": ["PUPPETEER_HEADLESS"] + "cache": false }, "test:update": { - "dependsOn": ["^prepublish"], - "passThroughEnv": ["PUPPETEER_HEADLESS"] + "dependsOn": ["^prepublish"] }, "dev": { - // "dependsOn": ["^prepublish"], + "dependsOn": ["prepublish", "^prepublish"], "persistent": true, - "cache": false, - "passThroughEnv": ["CLEAR_DIST_DIR"] + "cache": false }, "lint": {}, - "check-types": {} + "check-types": { + "dependsOn": ["^prepublish"] + }, + "//#references:update": { + "inputs": ["packages/*/package.json", "packages/plugins/*/package.json"], + "outputs": [ + "packages/*/tsconfig.json", + "packages/plugins/*/tsconfig.json" + ] + } } } diff --git a/vite.config.default.ts b/vite.config.default.ts index 9bfb2fd017..4dd3cc496e 100644 --- a/vite.config.default.ts +++ b/vite.config.default.ts @@ -7,7 +7,8 @@ import { build, Format } from 'esbuild'; import { resolve } from 'path'; import { umdWrapper } from 'esbuild-plugin-umd-wrapper'; -const emptyOutDir = process.env.CLEAR_DIST_DIR !== 'false'; +// don't empty out dir if --watch flag is passed +const emptyOutDir = !process.argv.includes('--watch'); function minifyAndUMDPlugin({ name, diff --git a/yarn.lock b/yarn.lock index 56d58b1c1a..f68b2f59ab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1956,11 +1956,16 @@ globby "^11.0.0" read-yaml-file "^1.1.0" -"@mdn/browser-compat-data@^5.2.34", "@mdn/browser-compat-data@^5.3.13": +"@mdn/browser-compat-data@^5.2.34": version "5.5.33" resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-5.5.33.tgz#c1177469bc4d39fa24c2cd3df317039e2b465b4c" integrity sha512-uO4uIBFn9D4UNyUmaueIWnE/IJhBlSJ7W1rANvDdaawhTX8CSgqUX8tj9/6a+1WjpL9Bgirf67d//S2VwDsfig== +"@mdn/browser-compat-data@^5.5.19": + version "5.6.12" + resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-5.6.12.tgz#ac3e1855c2387334bbfdb2b6249dd95c9d9c2b70" + integrity sha512-W/Km+GFczwpoimaXbtHYdjK26VHGszOEZ9EnIyLS2E65x6LEZs7r0FovR/XSkzgNau95sTxI3JfFKQFLIJE7EQ== + "@microsoft/api-extractor-model@7.28.13": version "7.28.13" resolved "https://registry.yarnpkg.com/@microsoft/api-extractor-model/-/api-extractor-model-7.28.13.tgz#96fbc52155e0d07e0eabbd9699065b77702fe33a" @@ -2255,6 +2260,11 @@ resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.0.tgz#5d694d345ce36b6ecf657349e03eb87297e68da4" integrity sha512-UOo5FdvOL0+eIVTgS4tIdbW+TtnBLWg1YBCcU2KWM7nuNwRz9bksDX1bekJJCpu25N1DVWaCwnT39dVQxzqS8g== +"@rrweb/utils@^2.0.0-alpha.17": + version "2.0.0-alpha.17" + resolved "https://registry.yarnpkg.com/@rrweb/utils/-/utils-2.0.0-alpha.17.tgz#d13a7326af0311e0f54551e223ace987608eaed5" + integrity sha512-HCsasPERBwOS9/LQeOytO2ETKTCqRj1wORBuxiy3t41hKhmi225DdrUPiWnyDdTQm1GdVbOymMRknJVPnZaSXw== + "@rushstack/node-core-library@4.0.2": version "4.0.2" resolved "https://registry.yarnpkg.com/@rushstack/node-core-library/-/node-core-library-4.0.2.tgz#e26854a3314b279d57e8abdb4acce7797d02f554" @@ -3552,7 +3562,7 @@ browser-process-hrtime@^1.0.0: resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626" integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow== -browserslist@^4.21.10, browserslist@^4.22.1, browserslist@^4.22.2: +browserslist@^4.22.1, browserslist@^4.22.2: version "4.23.1" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.1.tgz#ce4af0534b3d37db5c1a4ca98b9080f985041e96" integrity sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw== @@ -3562,6 +3572,16 @@ browserslist@^4.21.10, browserslist@^4.22.1, browserslist@^4.22.2: node-releases "^2.0.14" update-browserslist-db "^1.0.16" +browserslist@^4.23.0: + version "4.24.2" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.2.tgz#f5845bc91069dbd55ee89faf9822e1d885d16580" + integrity sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg== + dependencies: + caniuse-lite "^1.0.30001669" + electron-to-chromium "^1.5.41" + node-releases "^2.0.18" + update-browserslist-db "^1.1.1" + bs-logger@0.x: version "0.2.6" resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8" @@ -3677,7 +3697,12 @@ camelcase@^7.0.1: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-7.0.1.tgz#f02e50af9fd7782bc8b88a3558c32fd3a388f048" integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw== -caniuse-lite@^1.0.30001524, caniuse-lite@^1.0.30001629: +caniuse-lite@^1.0.30001605, caniuse-lite@^1.0.30001669: + version "1.0.30001677" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001677.tgz#27c2e2c637e007cfa864a16f7dfe7cde66b38b5f" + integrity sha512-fmfjsOlJUpMWu+mAAtZZZHz7UEwsUxIIvu1TJfO1HqFQvB/B+ii0xr9B5HpbZY/mC4XZ8SvjHJqtAY6pDPQEog== + +caniuse-lite@^1.0.30001629: version "1.0.30001636" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz#b15f52d2bdb95fad32c2f53c0b68032b85188a78" integrity sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg== @@ -4098,13 +4123,6 @@ create-require@^1.1.0: resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333" integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ== -cross-env@^5.2.0: - version "5.2.1" - resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.2.1.tgz#b2c76c1ca7add66dc874d11798466094f551b34d" - integrity sha512-1yHhtcfAd1r4nwQgknowuUNfIT9E8dOMMspC36g45dN+iD1blloi7xp8X/xAIDnjHWyt1uQ8PHk2fkNaym7soQ== - dependencies: - cross-spawn "^6.0.5" - cross-env@^7.0.3: version "7.0.3" resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf" @@ -4135,17 +4153,6 @@ cross-spawn@^5.1.0: shebang-command "^1.2.0" which "^1.2.9" -cross-spawn@^6.0.5: - version "6.0.5" - resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4" - integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ== - dependencies: - nice-try "^1.0.4" - path-key "^2.0.1" - semver "^5.5.0" - shebang-command "^1.2.0" - which "^1.2.9" - cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3: version "7.0.3" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6" @@ -4592,6 +4599,11 @@ electron-to-chromium@^1.4.796: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.803.tgz#cf55808a5ee12e2a2778bbe8cdc941ef87c2093b" integrity sha512-61H9mLzGOCLLVsnLiRzCbc63uldP0AniRYPV3hbGVtONA1pI7qSGILdbofR7A8TMbOypDocEAjH/e+9k1QIe3g== +electron-to-chromium@^1.5.41: + version "1.5.50" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.50.tgz#d9ba818da7b2b5ef1f3dd32bce7046feb7e93234" + integrity sha512-eMVObiUQ2LdgeO1F/ySTXsvqvxb6ZH2zPGaMYsWzRDdOddUa77tdmI0ltg+L16UpbWdhPmuF3wIQYyQq65WfZw== + emittery@^0.8.1: version "0.8.1" resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.8.1.tgz#bb23cc86d03b30aa75a7f734819dee2e1ba70860" @@ -4789,6 +4801,11 @@ escalade@^3.1.1, escalade@^3.1.2: resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.2.tgz#54076e9ab29ea5bf3d8f1ed62acffbb88272df27" integrity sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA== +escalade@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5" + integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA== + escape-goat@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-4.0.0.tgz#9424820331b510b0666b98f7873fe11ac4aa8081" @@ -4832,18 +4849,19 @@ eslint-compat-utils@^0.5.1: dependencies: semver "^7.5.4" -eslint-plugin-compat@^4.2.0: - version "4.2.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-compat/-/eslint-plugin-compat-4.2.0.tgz#eeaf80daa1afe495c88a47e9281295acae45c0aa" - integrity sha512-RDKSYD0maWy5r7zb5cWQS+uSPc26mgOzdORJ8hxILmWM7S/Ncwky7BcAtXVY5iRbKjBdHsWU8Yg7hfoZjtkv7w== +eslint-plugin-compat@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-compat/-/eslint-plugin-compat-5.0.0.tgz#d09dff02397d81c9f5b1ac740ef45b39538aa21d" + integrity sha512-29KNWyFkUbNVf6TIKVe9SVCGCtHjML3HnUg9C8LG2GsXf7miAeBOgdMc1n2B5n0sHUzg1/A4IFly7Jyf1gSbgQ== dependencies: - "@mdn/browser-compat-data" "^5.3.13" + "@mdn/browser-compat-data" "^5.5.19" ast-metadata-inferer "^0.8.0" - browserslist "^4.21.10" - caniuse-lite "^1.0.30001524" + browserslist "^4.23.0" + caniuse-lite "^1.0.30001605" find-up "^5.0.0" + globals "^13.24.0" lodash.memoize "^4.1.2" - semver "^7.5.4" + semver "^7.6.0" eslint-plugin-jest@^27.6.0: version "27.9.0" @@ -5578,7 +5596,7 @@ globals@^11.1.0: resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== -globals@^13.19.0: +globals@^13.19.0, globals@^13.24.0: version "13.24.0" resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171" integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ== @@ -5674,6 +5692,15 @@ growly@^1.3.0: resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081" integrity sha512-+xGQY0YyAWCnqy7Cd++hc2JqMYzlm0dG30Jd0beaA64sROr8C4nt8Yc9V5Ro3avlSUDTN0ulqP/VBKi1/lLygw== +happy-dom@^14.12.0: + version "14.12.0" + resolved "https://registry.yarnpkg.com/happy-dom/-/happy-dom-14.12.0.tgz#40c748578c6ebfb707e6ae69179d6c541d8f63b3" + integrity sha512-dHcnlGFY2o2CdxfuYpqwSrBrpj/Kuzv4u4f3TU5yHW1GL24dKij4pv1BRjXnXc3uWo8qsCbToF9weaDsm/He8A== + dependencies: + entities "^4.5.0" + webidl-conversions "^7.0.0" + whatwg-mimetype "^3.0.0" + hard-rejection@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883" @@ -7603,11 +7630,6 @@ netmask@^2.0.2: resolved "https://registry.yarnpkg.com/netmask/-/netmask-2.0.2.tgz#8b01a07644065d536383835823bc52004ebac5e7" integrity sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg== -nice-try@^1.0.4: - version "1.0.5" - resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366" - integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ== - no-case@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d" @@ -7657,6 +7679,11 @@ node-releases@^2.0.14: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b" integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw== +node-releases@^2.0.18: + version "2.0.18" + resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.18.tgz#f010e8d35e2fe8d6b2944f03f70213ecedc4ca3f" + integrity sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g== + normalize-package-data@^2.5.0: version "2.5.0" resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8" @@ -7968,11 +7995,6 @@ path-is-absolute@^1.0.0: resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f" integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg== -path-key@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40" - integrity sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw== - path-key@^3.0.0, path-key@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375" @@ -8027,6 +8049,11 @@ picocolors@^1.0.0, picocolors@^1.0.1: resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1" integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew== +picocolors@^1.1.0: + version "1.1.1" + resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" + integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA== + picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" @@ -8841,7 +8868,7 @@ semver-match@0.1.1: dependencies: semver "^5.1.0" -"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.5.0: +"semver@2 || 3 || 4 || 5", semver@^5.1.0: version "5.7.2" resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8" integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g== @@ -9761,47 +9788,47 @@ tty-table@^4.1.5: wcwidth "^1.0.1" yargs "^17.7.1" -turbo-darwin-64@2.0.4: - version "2.0.4" - resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-2.0.4.tgz#83c7835f8ba1f7a5473487ce73cfc8d5ad523614" - integrity sha512-x9mvmh4wudBstML8Z8IOmokLWglIhSfhQwnh2gBCSqabgVBKYvzl8Y+i+UCNPxheCGTgtsPepTcIaKBIyFIcvw== +turbo-darwin-64@2.2.3: + version "2.2.3" + resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-2.2.3.tgz#f0ced75ed031091e52851cbe8bb05d21a161a22b" + integrity sha512-Rcm10CuMKQGcdIBS3R/9PMeuYnv6beYIHqfZFeKWVYEWH69sauj4INs83zKMTUiZJ3/hWGZ4jet9AOwhsssLyg== -turbo-darwin-arm64@2.0.4: - version "2.0.4" - resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-2.0.4.tgz#046e5768e9d6b490b7108d5bef3f4a1594aca0ba" - integrity sha512-/B1Ih8zPRGVw5vw4SlclOf3C/woJ/2T6ieH6u54KT4wypoaVyaiyMqBcziIXycdObIYr7jQ+raHO7q3mhay9/A== +turbo-darwin-arm64@2.2.3: + version "2.2.3" + resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-2.2.3.tgz#0b4741383ab5070d8383891a65861a8869cc7202" + integrity sha512-+EIMHkuLFqUdJYsA3roj66t9+9IciCajgj+DVek+QezEdOJKcRxlvDOS2BUaeN8kEzVSsNiAGnoysFWYw4K0HA== -turbo-linux-64@2.0.4: - version "2.0.4" - resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-2.0.4.tgz#eab8c183a11b26ddec251d62778313a495971e4f" - integrity sha512-6aG670e5zOWu6RczEYcB81nEl8EhiGJEvWhUrnAfNEUIMBEH1pR5SsMmG2ol5/m3PgiRM12r13dSqTxCLcHrVg== +turbo-linux-64@2.2.3: + version "2.2.3" + resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-2.2.3.tgz#2b339db50c12bc52ce99139c156d5555717a209d" + integrity sha512-UBhJCYnqtaeOBQLmLo8BAisWbc9v9daL9G8upLR+XGj6vuN/Nz6qUAhverN4Pyej1g4Nt1BhROnj6GLOPYyqxQ== -turbo-linux-arm64@2.0.4: - version "2.0.4" - resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-2.0.4.tgz#2dcc3f1d3e56209736b2ce3d849b80e0d7116e42" - integrity sha512-AXfVOjst+mCtPDFT4tCu08Qrfv12Nj7NDd33AjGwV79NYN1Y1rcFY59UQ4nO3ij3rbcvV71Xc+TZJ4csEvRCSg== +turbo-linux-arm64@2.2.3: + version "2.2.3" + resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-2.2.3.tgz#a4daf6e0872a4e2652e2d05d68ad18cee5b10e94" + integrity sha512-hJYT9dN06XCQ3jBka/EWvvAETnHRs3xuO/rb5bESmDfG+d9yQjeTMlhRXKrr4eyIMt6cLDt1LBfyi+6CQ+VAwQ== -turbo-windows-64@2.0.4: - version "2.0.4" - resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-2.0.4.tgz#b2440d82892c983088ed386f9126d365594fc1a5" - integrity sha512-QOnUR9hKl0T5gq5h1fAhVEqBSjpcBi/BbaO71YGQNgsr6pAnCQdbG8/r3MYXet53efM0KTdOhieWeO3KLNKybA== +turbo-windows-64@2.2.3: + version "2.2.3" + resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-2.2.3.tgz#d44b3385948bd0f2ef5c2d53391f142bdd467b18" + integrity sha512-NPrjacrZypMBF31b4HE4ROg4P3nhMBPHKS5WTpMwf7wydZ8uvdEHpESVNMOtqhlp857zbnKYgP+yJF30H3N2dQ== -turbo-windows-arm64@2.0.4: - version "2.0.4" - resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-2.0.4.tgz#e943709535baf233f5b85ed35cd95dcf86815283" - integrity sha512-3v8WpdZy1AxZw0gha0q3caZmm+0gveBQ40OspD6mxDBIS+oBtO5CkxhIXkFJJW+jDKmDlM7wXDIGfMEq+QyNCQ== +turbo-windows-arm64@2.2.3: + version "2.2.3" + resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-2.2.3.tgz#d0625ec53f467013a6f259f87f7fc4ae8670aaa4" + integrity sha512-fnNrYBCqn6zgKPKLHu4sOkihBI/+0oYFr075duRxqUZ+1aLWTAGfHZLgjVeLh3zR37CVzuerGIPWAEkNhkWEIw== -turbo@^2.0.3: - version "2.0.4" - resolved "https://registry.yarnpkg.com/turbo/-/turbo-2.0.4.tgz#4fb6f0bf3be905953825de0368203e849c91e412" - integrity sha512-Ilme/2Q5kYw0AeRr+aw3s02+WrEYaY7U8vPnqSZU/jaDG/qd6jHVN6nRWyd/9KXvJGYM69vE6JImoGoyNjLwaw== +turbo@^2.0.4: + version "2.2.3" + resolved "https://registry.yarnpkg.com/turbo/-/turbo-2.2.3.tgz#0f45612d62526c98c75da0682aa8c26b902b5e07" + integrity sha512-5lDvSqIxCYJ/BAd6rQGK/AzFRhBkbu4JHVMLmGh/hCb7U3CqSnr5Tjwfy9vc+/5wG2DJ6wttgAaA7MoCgvBKZQ== optionalDependencies: - turbo-darwin-64 "2.0.4" - turbo-darwin-arm64 "2.0.4" - turbo-linux-64 "2.0.4" - turbo-linux-arm64 "2.0.4" - turbo-windows-64 "2.0.4" - turbo-windows-arm64 "2.0.4" + turbo-darwin-64 "2.2.3" + turbo-darwin-arm64 "2.2.3" + turbo-linux-64 "2.2.3" + turbo-linux-arm64 "2.2.3" + turbo-windows-64 "2.2.3" + turbo-windows-arm64 "2.2.3" type-check@^0.4.0, type-check@~0.4.0: version "0.4.0" @@ -9919,20 +9946,10 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA== -typescript@5.4.2: - version "5.4.2" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.2.tgz#0ae9cebcfae970718474fe0da2c090cad6577372" - integrity sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ== - -typescript@^4.7.3, typescript@^4.9.0, typescript@^4.9.5: - version "4.9.5" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a" - integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g== - -typescript@^5.0.3: - version "5.4.5" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.5.tgz#42ccef2c571fdbd0f6718b1d1f5e6e5ef006f611" - integrity sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ== +typescript@5.4.2, typescript@^5.0.3, typescript@^5.4.5: + version "5.6.3" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.6.3.tgz#5f3449e31c9d94febb17de03cc081dd56d81db5b" + integrity sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw== uc.micro@^1.0.1, uc.micro@^1.0.5: version "1.0.6" @@ -10017,6 +10034,14 @@ update-browserslist-db@^1.0.16: escalade "^3.1.2" picocolors "^1.0.1" +update-browserslist-db@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz#80846fba1d79e82547fb661f8d141e0945755fe5" + integrity sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A== + dependencies: + escalade "^3.2.0" + picocolors "^1.1.0" + update-notifier@6.0.2: version "6.0.2" resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-6.0.2.tgz#a6990253dfe6d5a02bd04fbb6a61543f55026b60" @@ -10125,7 +10150,7 @@ vite-node@1.6.0: picocolors "^1.0.0" vite "^5.0.0" -vite-plugin-dts@^3.8.1: +vite-plugin-dts@^3.8.1, vite-plugin-dts@^3.9.1: version "3.9.1" resolved "https://registry.yarnpkg.com/vite-plugin-dts/-/vite-plugin-dts-3.9.1.tgz#625ad388ec3956708ccec7960550a7b0a8e8909e" integrity sha512-rVp2KM9Ue22NGWB8dNtWEr+KekN3rIgz1tWD050QnRGlriUCmaDwa7qA5zDEjbXg5lAXhYMSBJtx3q3hQIJZSg== @@ -10163,7 +10188,7 @@ vite-plugin-zip-pack@^1.2.2: dependencies: jszip "^3.10.1" -vite@^5.0.0, "vite@^5.0.0 || ^4.1.4", vite@^5.2.8: +vite@^5.0.0, "vite@^5.0.0 || ^4.1.4", vite@^5.2.8, vite@^5.3.1: version "5.3.1" resolved "https://registry.yarnpkg.com/vite/-/vite-5.3.1.tgz#bb2ca6b5fd7483249d3e86b25026e27ba8a663e6" integrity sha512-XBmSKRLXLxiaPYamLv3/hnP/KXDai1NDexN0FpkTaZXTfycHvkRHoenpgl/fvuK/kPbB6xAgoyiryAhQNxYmAQ== @@ -10307,6 +10332,11 @@ webidl-conversions@^6.1.0: resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514" integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w== +webidl-conversions@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a" + integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g== + whatwg-encoding@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0" @@ -10319,6 +10349,11 @@ whatwg-mimetype@^2.3.0: resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf" integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g== +whatwg-mimetype@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz#5fa1a7623867ff1af6ca3dc72ad6b8a4208beba7" + integrity sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q== + whatwg-url@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"