Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 316bde2

Browse filesBrowse files
yyx990803yyx990803
committed
support src import for templates
1 parent 580ae97 commit 316bde2
Copy full SHA for 316bde2

File tree

Expand file treeCollapse file tree

10 files changed

+67
-31
lines changed
Filter options
Expand file treeCollapse file tree

10 files changed

+67
-31
lines changed

‎lib/loader.js

Copy file name to clipboardExpand all lines: lib/loader.js
+23-10Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -54,16 +54,20 @@ module.exports = function (content) {
5454
)
5555
}
5656

57-
function getRequireForImport (impt) {
57+
function getRequireForImport (type, impt, scoped) {
5858
return 'require(' +
59-
loaderUtils.stringifyRequest(self,
60-
'-!' +
61-
getLoaderString('style', impt, impt.scoped) +
62-
impt.src
63-
) +
59+
getRequireForImportString(type, impt, scoped) +
6460
')\n'
6561
}
6662

63+
function getRequireForImportString (type, impt, scoped) {
64+
return loaderUtils.stringifyRequest(self,
65+
'-!' +
66+
getLoaderString(type, impt, scoped) +
67+
impt.src
68+
)
69+
}
70+
6771
function getLoaderString (type, part, scoped) {
6872
var lang = part.lang || defaultLang[type]
6973
var loader = loaders[lang]
@@ -130,7 +134,7 @@ module.exports = function (content) {
130134
// add requires for src imports
131135
parts.styleImports.forEach(function (impt) {
132136
if (impt.scoped) hasLocalStyles = true
133-
output += getRequireForImport(impt)
137+
output += getRequireForImport('style', impt, impt.scoped)
134138
})
135139

136140
// add requires for styles
@@ -146,11 +150,16 @@ module.exports = function (content) {
146150
}
147151

148152
// add require for template
153+
var template
149154
if (parts.template.length) {
155+
template = parts.template[0]
150156
output += ';(typeof module.exports === "function" ' +
151157
'? module.exports.options ' +
152-
': module.exports).template = ' +
153-
getRequire('template', parts.template[0], 0, hasLocalStyles)
158+
': module.exports).template = ' + (
159+
template.src
160+
? getRequireForImport('template', template, hasLocalStyles)
161+
: getRequire('template', template, 0, hasLocalStyles)
162+
)
154163
}
155164

156165
// hot reload
@@ -159,7 +168,11 @@ module.exports = function (content) {
159168
(parts.script.length || parts.template.length)
160169
) {
161170
var scriptString = parts.script.length ? getRequireString('script', parts.script[0], 0) : ''
162-
var templateString = parts.template.length ? getRequireString('template', parts.template[0], 0, hasLocalStyles) : ''
171+
var templateString = template
172+
? template.src
173+
? getRequireForImportString('template', template, hasLocalStyles)
174+
: getRequireString('template', template, 0, hasLocalStyles)
175+
: ''
163176
var accepted = []
164177
if (scriptString) {
165178
accepted.push(scriptString.slice(1, -1))

‎lib/parser.js

Copy file name to clipboardExpand all lines: lib/parser.js
+26-17Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,36 @@ module.exports = function (content) {
1919
var src = getAttribute(node, 'src')
2020
var scoped = getAttribute(node, 'scoped') != null
2121

22+
// node count check
23+
if (
24+
(type === 'script' || type === 'template') &&
25+
output[type].length > 0
26+
) {
27+
return cb(new Error(
28+
'[vue-loader] Only one <script> or <template> tag is ' +
29+
'allowed inside a Vue component.'
30+
))
31+
}
32+
33+
// handle src imports
2234
if (src) {
23-
if (type !== 'style') {
35+
if (type !== 'style' && type !== 'template') {
2436
return cb(new Error(
25-
'[vue-loader] src import is only supported for <style> tags.'
37+
'[vue-loader] src import is only supported for <template> and <style> tags.'
2638
))
2739
}
28-
output.styleImports.push({
29-
src: src,
30-
lang: lang,
31-
scoped: scoped
32-
})
40+
if (type === 'style') {
41+
output.styleImports.push({
42+
src: src,
43+
lang: lang,
44+
scoped: scoped
45+
})
46+
} else if (type === 'template') {
47+
output.template.push({
48+
src: src,
49+
lang: lang
50+
})
51+
}
3352
return
3453
}
3554

@@ -41,16 +60,6 @@ module.exports = function (content) {
4160
return
4261
}
4362

44-
if (
45-
(type === 'script' || type === 'template') &&
46-
output[type].length > 0
47-
) {
48-
return cb(new Error(
49-
'[vue-loader] Only one <script> or <template> tag is ' +
50-
'allowed inside a Vue component.'
51-
))
52-
}
53-
5463
// Work around changes in parse5 >= 1.2.0
5564
if (node.childNodes[0].nodeName === '#document-fragment') {
5665
node = node.childNodes[0]

‎test/fixtures/import.vue

Copy file name to clipboardExpand all lines: test/fixtures/import.vue
-2Lines changed: 0 additions & 2 deletions
This file was deleted.

‎test/fixtures/import-scoped.css renamed to ‎test/fixtures/style-import-scoped.css

Copy file name to clipboard
File renamed without changes.

‎test/fixtures/import.css renamed to ‎test/fixtures/style-import.css

Copy file name to clipboard
File renamed without changes.

‎test/fixtures/style-import.vue

Copy file name to clipboard
+2Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<style src="./style-import.css"></style>
2+
<style src="./style-import-scoped.css" scoped></style>

‎test/fixtures/template-import.jade

Copy file name to clipboard
+2Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
div
2+
h1 hello

‎test/fixtures/template-import.js

Copy file name to clipboard
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
window.testModule = require('./template-import.vue')

‎test/fixtures/template-import.vue

Copy file name to clipboard
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<template lang="jade" src="./template-import.jade"></template>

‎test/test.js

Copy file name to clipboardExpand all lines: test/test.js
+12-2Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,17 +110,27 @@ describe('vue-loader', function () {
110110

111111
it('style import', function (done) {
112112
test({
113-
entry: './test/fixtures/import.vue'
113+
entry: './test/fixtures/style-import.vue'
114114
}, function (window) {
115115
var styles = window.document.querySelectorAll('style')
116116
expect(styles[0].textContent).to.contain('h1 { color: red; }')
117117
// import with scoped
118-
var id = '_v-' + hash(require.resolve('./fixtures/import.vue'))
118+
var id = '_v-' + hash(require.resolve('./fixtures/style-import.vue'))
119119
expect(styles[1].textContent).to.contain('h1[' + id + '] { color: green; }')
120120
done()
121121
})
122122
})
123123

124+
it('template import', function (done) {
125+
test({
126+
entry: './test/fixtures/template-import.js'
127+
}, function (window) {
128+
var module = window.testModule
129+
expect(module.template).to.contain('<div><h1>hello</h1></div>')
130+
done()
131+
})
132+
})
133+
124134
it('source map', function (done) {
125135
var config = assign({}, globalConfig, {
126136
entry: './test/fixtures/basic.js',

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.