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

Author: AndreKR

lib/template-compiler/index.js

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

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

@@ -0,0 +1,56 @@
+// vue compiler module for transforming `img:srcset` to a number of `require`s
+
+module.exports = function() {
+  return {
+    postTransformNode: node => {
+      transform(node)
+    }
+  }
+}
+
+function transform (node) {
+	
+	if (node.tag == 'img' && 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
+
+				let spaceCharacters = /[ \t\n\f\r]+/
+
+				let imageCandidates = value.substr(1, value.length-2).split(',').map(s => {
+					let [url, descriptor] = s.trim().split(spaceCharacters, 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+'")'
+	}
+}