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

Added srcset support (#18)

Browse Source 
* added src set as a parsed attribute

* added tests

* changed to /a

* added multiple attribute handling

* added better comment

* made snapshot ignore invalid input as if it is invalid input in the original DOM, it should stay invalid in the recreated DOM

* added extra absolute test case

* code style

* addressed comments
This commit is contained in:
Filip Slatinac
2019-09-30 23:32:50 -04:00
committed by yz-yu
parent 7203517d15
commit 30bbd9e21d
4 changed files with 39 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/snapshot.ts
View File

@@ -85,7 +85,36 @@ export function absoluteToStylesheet(cssText: string, href: string): string {
});
}
function getAbsoluteSrcsetString(doc: Document, attributeValue: string) {
if(attributeValue.trim() === "") {
return attributeValue
}
const srcsetValues = attributeValue.split(",")
// srcset attributes is defined as such:
// srcset = "url size,url1 size1"
const resultingSrcsetString = srcsetValues.map((srcItem) => {
// removing all but middle spaces
const trimmedSrcItem = srcItem.trimLeft().trimRight()
const urlAndSize = trimmedSrcItem.split(" ")
// this means we have both 0:url and 1:size
if (urlAndSize.length === 2) {
const absUrl = absoluteToDoc(doc, urlAndSize[0])
return `${absUrl} ${urlAndSize[1]}`
} else if(urlAndSize.length === 1){
const absUrl = absoluteToDoc(doc, urlAndSize[0])
return `${absUrl}`
}
return ""
}).join(',')
return resultingSrcsetString
}
function absoluteToDoc(doc: Document, attributeValue: string): string {
if (attributeValue.trim() === ""){
return attributeValue
}
const a: HTMLAnchorElement = doc.createElement('a');
a.href = attributeValue;
return a.href;
@@ -132,6 +161,8 @@ function serializeNode(
// relative path in attribute
if (name === 'src' || name === 'href') {
attributes[name] = absoluteToDoc(doc, value);
} else if (name == 'srcset') {
attributes[name] = getAbsoluteSrcsetString(doc, value)
} else if (name === 'style') {
attributes[name] = absoluteToStylesheet(value, location.href);
} else {

5
test/__snapshots__/integration.ts.snap
View File

@@ -181,7 +181,10 @@ exports[`[html file]: with-relative-res.html 1`] = `
</head>
<body>
<a href=\\"http://localhost:3030/basic.html\\"></a>
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"\\" /></body></html>"
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"\\" />
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/a.jpg\\" />
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://exmple.com/a.jpg\\" />
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/a.jpg 3x,http://localhost:3030/a.jpg 45x,http://localhost:3030/b.png\\" /></body></html>"
`;
exports[`[html file]: with-script.html 1`] = `

3
test/html/with-relative-res.html
View File

@@ -9,5 +9,8 @@
<body>
<a href="./basic.html"></a>
<img src="./a.jpg" alt="" srcset="">
<img src="./a.jpg" alt="" srcset="/a.jpg">
<img src="./a.jpg" alt="" srcset="http://exmple.com/a.jpg ">
<img src="./a.jpg" alt="" srcset="/a.jpg 3x, /a.jpg 45x , /b.png">
</body>
</html>

2
test/snapshot.test.ts
View File

@@ -5,7 +5,7 @@ import { absoluteToStylesheet } from '../src/snapshot';
describe('absolute url to stylesheet', () => {
const href = 'http://localhost/css/style.css';
it('cam handle relative path', () => {
it('can handle relative path', () => {
expect(absoluteToStylesheet('url(a.jpg)', href)).to.equal(
`url('http://localhost/css/a.jpg')`,
);