From 7947dd28a709a027d71a651ef9a3439c4862d581 Mon Sep 17 00:00:00 2001 From: kazuya kawaguchi Date: Tue, 17 Jan 2017 11:33:05 +0900 Subject: [PATCH 1/4] add dev dependency module --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 7db777df2..bb436988f 100644 --- a/package.json +++ b/package.json @@ -72,6 +72,7 @@ "stylus": "^0.54.5", "stylus-loader": "^2.0.0", "sugarss": "^0.2.0", + "url-loader": "^0.5.7", "vue": "^2.1.0", "vue-template-compiler": "^2.1.0", "webpack": "^2.1.0-beta.27" From 8b06b54c4b5656c21681eb82d4550f7d970384cb Mon Sep 17 00:00:00 2001 From: kazuya kawaguchi Date: Tue, 17 Jan 2017 11:34:12 +0900 Subject: [PATCH 2/4] add 'image' tag to 'transformToRequire' option as default Closes #569 --- lib/template-compiler.js | 3 ++- test/test.js | 28 ++++++++++++++++++++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/lib/template-compiler.js b/lib/template-compiler.js index 8870631f8..58ee3bda7 100644 --- a/lib/template-compiler.js +++ b/lib/template-compiler.js @@ -7,7 +7,8 @@ var hotReloadAPIPath = normalize.dep('vue-hot-reload-api') // vue compiler module for using transforming `:` to `require` var defaultTransformToRequire = { - img: 'src' + img: 'src', + image: 'xlink:href' } var transformToRequire = defaultTransformToRequire var defaultCompileOptions = { diff --git a/test/test.js b/test/test.js index 4e109724e..e7809c5a4 100644 --- a/test/test.js +++ b/test/test.js @@ -330,6 +330,34 @@ describe('vue-loader', function () { }) }) + it('transformToRequire option', function (done) { + test({ + entry: './test/fixtures/transform.vue', + module: { + rules: [ + { test: /\.vue$/, loader: loaderPath }, + { + test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, + loader: 'url-loader' + } + ] + } + }, function (window, module) { + function includeDataURL (s) { + return !!s.match(/\s*data:([a-z]+\/[a-z]+(;[a-z\-]+\=[a-z\-]+)?)?(;base64)?,[a-z0-9\!\$\&\'\,\(\)\*\+\,\;\=\-\.\_\~\:\@\/\?\%\s]*\s*/i) + } + var vnode = mockRender(module) + // img tag + expect(includeDataURL(vnode.children[0].data.attrs.src)).to.equal(true) + // image tag (SVG) + expect(includeDataURL(vnode.children[2].children[0].data.attrs['xlink:href'])).to.equal(true) + var style = window.document.querySelector('style').textContent + // style + expect(includeDataURL(style)).to.equal(true) + done() + }) + }) + it('postcss options', function (done) { test({ entry: './test/fixtures/postcss.vue', From e4ed09a943bdd4a2ad8b091b441bbeac07d86fc8 Mon Sep 17 00:00:00 2001 From: kazuya kawaguchi Date: Tue, 17 Jan 2017 11:36:47 +0900 Subject: [PATCH 3/4] update doc --- docs/en/options.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/en/options.md b/docs/en/options.md index ccffacf70..7f0d883a4 100644 --- a/docs/en/options.md +++ b/docs/en/options.md @@ -108,9 +108,9 @@ module.exports = { ### transformToRequire - type: `{ [tag: string]: string | Array }` -- default: `{ img: 'src' }` +- default: `{ img: 'src', image: 'xlink:href' }` - During template compilation, the compiler can transform certain attributes, such as `src` URLs, into `require` calls, so that the target asset can be handled by Webpack. The default config transforms the `src` attribute on `` tags. + During template compilation, the compiler can transform certain attributes, such as `src` URLs, into `require` calls, so that the target asset can be handled by Webpack. The default config transforms the `src` attribute on `` tags and `xlink:href` attribute on `` tags of SVG. ### buble From 3cb9be86ed79d4f84cca299ed98fd0157e36eb50 Mon Sep 17 00:00:00 2001 From: kazuya kawaguchi Date: Tue, 17 Jan 2017 11:47:53 +0900 Subject: [PATCH 4/4] add fixture --- test/fixtures/transform.vue | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 test/fixtures/transform.vue diff --git a/test/fixtures/transform.vue b/test/fixtures/transform.vue new file mode 100644 index 000000000..33442c644 --- /dev/null +++ b/test/fixtures/transform.vue @@ -0,0 +1,12 @@ + + +