Support for srcset (#953)

* Convert img:srcset to require, similar to img:src

* fix srcset import when attribute uses whitespace

covers cases like:
```
<img srcset="
    ../image.jpg 1x, 
    ../image.2x.jpg 2x,
    ../image.1920x1280.jpg 1920w
" alt="srcset on multiple lines and with extra whitespace">
```

* Further fixes for whitespace handling

Also added a test for srcset.

Author: AndreKR

lib/template-compiler/index.js

@@ -5,6 +5,7 @@ const compiler = require('vue-template-compiler')
 const transpile = require('vue-template-es2015-compiler')
 const hotReloadAPIPath = normalize.dep('vue-hot-reload-api')
 const transformRequire = require('./modules/transform-require')
+const transformSrcset = require('./modules/transform-srcset')
 
 module.exports = function (html) {
   this.cacheable()
@@ -13,8 +14,9 @@ module.exports = function (html) {
   const vueOptions = this.options.__vueOptions__ || {}
   const options = loaderUtils.getOptions(this) || {}
 
-  const defaultModules = [transformRequire(options.transformToRequire)]
+  const defaultModules = [transformRequire(options.transformToRequire), transformSrcset()]
   let userModules = vueOptions.compilerModules || options.compilerModules
+
   // for HappyPack cross-process use cases
   if (typeof userModules === 'string') {
     userModules = require(userModules)

lib/template-compiler/modules/transform-srcset.js

@@ -0,0 +1,54 @@
+// vue compiler module for transforming `img:srcset` to a number of `require`s
+
+module.exports = function () {
+  return {
+    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
+        var value = attr.value
+        var 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 }
+        })
+
+        let code = ''
+        imageCandidates.forEach((o, i, a) => {
+          code += o.require + ' + " ' + o.descriptor + (i < a.length - 1 ? ', " + ' : '"')
+        })
+
+        attr.value = code
+      }
+    })
+  }
+}
+
+function urlToRequire (url) {
+  // same logic as in transform-require.js
+  var firstChar = url.charAt(0)
+  if (firstChar === '.' || firstChar === '~') {
+    if (firstChar === '~') {
+      var secondChar = url.charAt(1)
+      url = '"' + url.slice(secondChar === '/' ? 2 : 1)
+    }
+    return `require("${url}")`
+  }
+}

test/fixtures/transform.vue

@@ -4,6 +4,14 @@
   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
     <image xlink:href="./logo.png" />
   </svg>
+  <img src="./logo.png" srcset="./logo.png 2x">
+  <img src="./logo.png" srcset="./logo.png 2x, ./logo.png 3x">
+  <img
+    src="./logo.png"
+    srcset="
+      ./logo.png 2x,
+      ./logo.png 3x
+  ">
 </div>
 </template>
 

test/test.js

@@ -434,6 +434,16 @@ describe('vue-loader', function () {
       // image tag (SVG)
       expect(includeDataURL(vnode.children[2].children[0].data.attrs['xlink:href'])).to.equal(true)
       var style = window.document.querySelector('style').textContent
+
+      let dataURL = vnode.children[0].data.attrs.src
+
+      // image tag with srcset
+      expect(vnode.children[4].data.attrs.srcset).to.equal(dataURL + " 2x")
+      // image tag with srcset with two candidates
+      expect(vnode.children[6].data.attrs.srcset).to.equal(dataURL + " 2x, " + dataURL + " 3x")
+      // image tag with multiline srcset
+      expect(vnode.children[8].data.attrs.srcset).to.equal(dataURL + " 2x, " + dataURL + " 3x")
+
       // style
       expect(includeDataURL(style)).to.equal(true)
       done()