fix(rrweb-snapshot): keep every attribute on an inlined img that has a srcset

[SaintPepsi]

Fixes #1937.

Bug

buildNode() in rebuild.ts has one branch that backs up srcset to rrweb-original-srcset. The condition checks the node (img with srcset and rr_dataURL) but not the attribute name. For such an img, every attribute in the loop enters that branch. alt, class, style, id and sizes are never set. Only src survives, because the rr_dataURL step sets it later.

Effect: responsive images (Next.js <Image fill>, lazysizes) replay at natural size with no style. Present in 2.0.1, 2.1.4 and main. Introduced in #822.

Fix

Add name === 'srcset' to the condition and drop the redundant n.attributes.srcset check.

 } else if (
+  name === 'srcset' &&
   tagName === 'img' &&
-  n.attributes.srcset &&
   n.attributes.rr_dataURL
 ) {

Test

New case in rebuild.test.ts: rebuild an img with id, alt, class, style, src, srcset, rr_dataURL. Assert srcset moves to rrweb-original-srcset and the other attributes are kept.

Without the fix:

FAIL  test/rebuild.test.ts > rebuild > browser rebuild target guard > keeps every other attribute on an inlined img that has a srcset
Tests  1 failed | 30 passed | 1 skipped (32)

With the fix, packages/rrweb-snapshot:

yarn test        Test Files  5 passed (5)   Tests  139 passed | 1 skipped (140)
yarn lint        0 errors, 8 warnings (pre-existing, not on changed lines)
yarn check-types clean

Live repro in rrwebdebug.com (two identical imgs, one with srcset; bug: one red box, fixed: two): https://rrwebdebug.com/play/index.html?url=https%3A%2F%2Fgist.github.com%2FSaintPepsi%2F1aa63b3b23d690b987258fca4a21c632&version=2.0.1&virtual-dom=on&play=on

Changeset: rrweb-snapshot patch.

Maple

[changeset-bot]

🦋 Changeset detected

Latest commit: 51a7cfc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 22 packages

Name	Type
rrweb-snapshot	Patch
@rrweb/all	Patch
@rrweb/browser-client	Patch
@rrweb/packer	Patch
@rrweb/record	Patch
@rrweb/replay	Patch
rrdom-nodejs	Patch
rrdom	Patch
rrvideo	Patch
rrweb-player	Patch
rrweb	Patch
@rrweb/types	Patch
@rrweb/utils	Patch
@rrweb/web-extension	Patch
@rrweb/rrweb-plugin-canvas-webrtc-record	Patch
@rrweb/rrweb-plugin-canvas-webrtc-replay	Patch
@rrweb/rrweb-plugin-console-record	Patch
@rrweb/rrweb-plugin-console-replay	Patch
@rrweb/rrweb-plugin-network-record	Patch
@rrweb/rrweb-plugin-network-replay	Patch
@rrweb/rrweb-plugin-sequential-id-record	Patch
@rrweb/rrweb-plugin-sequential-id-replay	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[pkg-pr-new]

@rrweb/all

npm i https://pkg.pr.new/rrweb-io/rrweb/@rrweb/all@51a7cfc

@rrweb/browser-client

npm i https://pkg.pr.new/rrweb-io/rrweb/@rrweb/browser-client@51a7cfc

@rrweb/packer

npm i https://pkg.pr.new/rrweb-io/rrweb/@rrweb/packer@51a7cfc

@rrweb/record

npm i https://pkg.pr.new/rrweb-io/rrweb/@rrweb/record@51a7cfc

@rrweb/replay

npm i https://pkg.pr.new/rrweb-io/rrweb/@rrweb/replay@51a7cfc

rrdom

npm i https://pkg.pr.new/rrweb-io/rrweb/rrdom@51a7cfc

rrdom-nodejs

npm i https://pkg.pr.new/rrweb-io/rrweb/rrdom-nodejs@51a7cfc

rrvideo

npm i https://pkg.pr.new/rrweb-io/rrweb/rrvideo@51a7cfc

rrweb

npm i https://pkg.pr.new/rrweb-io/rrweb@51a7cfc

rrweb-player

npm i https://pkg.pr.new/rrweb-io/rrweb/rrweb-player@51a7cfc

rrweb-snapshot

npm i https://pkg.pr.new/rrweb-io/rrweb/rrweb-snapshot@51a7cfc

@rrweb/types

npm i https://pkg.pr.new/rrweb-io/rrweb/@rrweb/types@51a7cfc

@rrweb/utils

npm i https://pkg.pr.new/rrweb-io/rrweb/@rrweb/utils@51a7cfc

@rrweb/rrweb-plugin-canvas-webrtc-record

npm i https://pkg.pr.new/rrweb-io/rrweb/@rrweb/rrweb-plugin-canvas-webrtc-record@51a7cfc

@rrweb/rrweb-plugin-canvas-webrtc-replay

npm i https://pkg.pr.new/rrweb-io/rrweb/@rrweb/rrweb-plugin-canvas-webrtc-replay@51a7cfc

@rrweb/rrweb-plugin-console-record

npm i https://pkg.pr.new/rrweb-io/rrweb/@rrweb/rrweb-plugin-console-record@51a7cfc

@rrweb/rrweb-plugin-console-replay

npm i https://pkg.pr.new/rrweb-io/rrweb/@rrweb/rrweb-plugin-console-replay@51a7cfc

@rrweb/rrweb-plugin-network-record

npm i https://pkg.pr.new/rrweb-io/rrweb/@rrweb/rrweb-plugin-network-record@51a7cfc

@rrweb/rrweb-plugin-network-replay

npm i https://pkg.pr.new/rrweb-io/rrweb/@rrweb/rrweb-plugin-network-replay@51a7cfc

@rrweb/rrweb-plugin-sequential-id-record

npm i https://pkg.pr.new/rrweb-io/rrweb/@rrweb/rrweb-plugin-sequential-id-record@51a7cfc

@rrweb/rrweb-plugin-sequential-id-replay

npm i https://pkg.pr.new/rrweb-io/rrweb/@rrweb/rrweb-plugin-sequential-id-replay@51a7cfc

commit: 51a7cfc