transform-srcset.js
1.63 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// vue compiler module for transforming `img:srcset` to a number of `require`s
const urlToRequire = require('../url-to-require')
module.exports = () => ({
postTransformNode: node => {
transform(node)
}
})
function transform (node) {
const tags = ['img', 'source']
if (tags.indexOf(node.tag) !== -1 && node.attrs) {
node.attrs.forEach(attr => {
if (attr.name === 'srcset') {
// same logic as in transform-require.js
const value = attr.value
const isStatic = value.charAt(0) === '"' && value.charAt(value.length - 1) === '"'
if (!isStatic) {
return
}
// http://w3c.github.io/html/semantics-embedded-content.html#ref-for-image-candidate-string-5
const escapedSpaceCharacters = /( |\\t|\\n|\\f|\\r)+/g
const imageCandidates = value.substr(1, value.length - 2).split(',').map(s => {
// The attribute value arrives here with all whitespace, except normal spaces, represented by escape sequences
const [url, descriptor] = s.replace(escapedSpaceCharacters, ' ').trim().split(' ', 2)
return { require: urlToRequire(url), descriptor: descriptor }
})
// "require(url1)"
// "require(url1) 1x"
// "require(url1), require(url2)"
// "require(url1), require(url2) 2x"
// "require(url1) 1x, require(url2)"
// "require(url1) 1x, require(url2) 2x"
const code = imageCandidates.map(
({ require, descriptor }) => `${require} + "${descriptor ? ' ' + descriptor : ''}, " + `
).join('').slice(0, -6).concat('"').replace(/ \+ ""$/, '')
attr.value = code
}
})
}
}